{"_id":"@material/mwc-tab-bar","_rev":"716-6a3ae9c50508c528aedae0d3f417c215","name":"@material/mwc-tab-bar","dist-tags":{"latest":"0.27.0","canary":"0.26.0-canary.0af8ade5.0"},"versions":{"0.6.0":{"name":"@material/mwc-tab-bar","version":"0.6.0","description":"> :warning: These components are a work in progress. They are pre-release and should be considered experimental, as they may undergo major changes before release. We are experimenting with alternate architectures and approaches with the goal of allowing u","main":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.6.0","@material/mwc-tab":"^0.6.0","@material/mwc-tab-scroller":"^0.6.0","@material/tab-bar":"^1.0.0"},"publishConfig":{"access":"public"},"gitHead":"1961a2530cc20bc020bba88f4da76d085ad1f1e0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.6.0","_nodeVersion":"10.16.0","_npmVersion":"lerna/3.14.1/node@v10.16.0+x64 (darwin)","dist":{"integrity":"sha512-JE3ahFbYTsi2PWIOpyAetk+O+WASY/pFsqyOp8kpy6LJCHdoRO1PLiARQi71W5AXPuL43tUldbZDcvNFG+c+og==","shasum":"1a87f092b9bba24b4733c8fcc7a42a5d82007f98","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.6.0.tgz","fileCount":15,"unpackedSize":286355,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc+EAvCRA9TVsSAnZWagAAKKEP/jQ1Gj1DIKU/L3VBnhgv\nqRGjNTlKnMu3xtYxRgCbgPlJbTy00sUQ3M+dqv5mHkkws2Nd1asBFy8N8KC/\ntxABBF1KY+V4vpyGmfgaCfxP3gHrCDnN+/AjER89usvQr+b/o1Mv2UD5i+wN\nV0v4RymnfEU4nfBOV5sXIwW4hE0xkjHWxzmPnhp97OKJ6tC6eTiZpAH69pTV\nJbvPl6zzFwT9DTu1os16z3ZOcM/tC2hPDANslByu/3TTy+p3KWUyKMWbTGZI\nlpG1fG5fwV1G1X4n/kxEa2f0KQKSUFt/e1ygb1MjMyd4vb9jjr5c0QsJWZFv\nkkUcw34dwsUfb+zSPhNnN/ZEQehLQqV8ommMPGSvR5YPBRy7gawWpWflHS0+\n/9v1DFhYdN7JY9WQFCPwdKWtUoK1kby+es2TKBkoC3xfy5eE6vZd+BdLULL9\nX26ZBHiV7oOgV1SrOp+bbuXUZuQ8I107jDigVrWXEjMlLh7AVpYb4k/U/qdF\nwg1lGcZ7EahLLqvUdVi811gWDmMln2m4y1BKZc6VSNCGceP6fWngXEP+RH1f\nitfFXqH6OZDgf3byT/8iRmnJXAFfkQPP0hm5EuDyi46X+Twbhz9v1nuUiA7X\nj36bDXdwmv5pitz4TAvRDvhL1zk70gkDMoqulqYEHJIBNay9Cjzk3N93cu8L\nAJUg\r\n=CoQ+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM0Ar5fCA6S/p1b/PbnWyJosalKgDZZpTWhotwyLJzigIgCF0hWXdEwNcj+F8ZT+jIJBc/NDidLX7eWBViIwieBX4="}]},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.6.0_1559773231119_0.3433278096077872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.0":{"name":"@material/mwc-tab-bar","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-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-tab":"^0.7.0","@material/mwc-tab-scroller":"^0.7.0","@material/tab-bar":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"c8c5d01ad2103af63e3d7656b5d1acc5ccaa05db","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.7.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.14.1/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-zBjqTdsqdAq9bskcY+cdBm2Ur6UyoJs3E/MoMCpTDzZYaDMH3DJVyj9hrqMuJV8vPTJ71YdoVi9vQrxkGqv5OA==","shasum":"200819dd6a79cff3768a170462ec7ecb8fd3a906","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.7.0.tgz","fileCount":16,"unpackedSize":49612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZZ9wCRA9TVsSAnZWagAAX9QQAIrJ8cqdHR47quzgajUT\nmaXHHiXMt5uhLt8L7tklNvkvb/DlF5cyYOLM1ZLUBOz9lD2RoriiBZpvRLVY\n14kwkPDELqKWz7MS8Mn7YSltsvrXoY9E1iSCBaYPqbNA0Yxjf49pGBhMLDgQ\nwol+VyITdqCw7HdlnYhOHjsARC0Sp9K6maoLnTvoS2sBJgd0sb1sW5q+oQPC\npDDJI1VgS4nIcYcqUlO6uNQ7ahC/W6xNdKMrW2/IhvU7dfIh+NI7n0+eW9d4\nTtF9dhafb1rX8UVFZdp159CU10mUvsAwCM5hwK0bmN9MLjLQWHKpbtEjWOVY\ndfgfyNPmzlB8iAMNTN5Pipf0COBne4WOhdufjK4M6deOFfPGWqhfQifV6a3H\nzFmDe2hj+R5SFglZYpwoPGXjQpxnYemJOQLVZeLMRbzRg7tFL0mcLWYfc1Rt\nxikMO6aW0F16Q0wtfXWqPPtw/Ix8O+hNRGUj0+6+NyIjbrzYo+WtDBZDPO3p\nMLcrazEKF0/rZhj1B/HjxtdyNA7TeNJK1t860GrZUnrpqZm0R77f6e9O6fMt\nsi0E7Wj43taIjsTb6TZ5Un1znv+KCIQcfZ2fq9bbE7GCTswnM/7cAZegL4N4\nlga1f+NJHj0fw2hQOKPwjtXYTd7WSM30ry0f9Ks7ECjqGLeLzY3PJDNIeEaC\nJ2jQ\r\n=TreE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHby0MOa78F7mtR3M4vY8KpcDXek4LLCfOY4w0lFPlJGAiA88ZkusrH7+XPyBLgY4uQBj8BaYWKcpOhYP+GbeaMCbA=="}]},"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-bar_0.7.0_1566941039790_0.07287987004608398"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.7.1":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.7.0","@material/mwc-tab":"^0.7.1","@material/mwc-tab-scroller":"^0.7.1","@material/tab-bar":"^3.0.0"},"publishConfig":{"access":"public"},"gitHead":"f8389e38b66e6261a8578f4a748efcb7367da176","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.7.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-3jlOvOzh4kp0tAgP1QWG8XvLmf9wqbWY2Ld/2ioHaK3tTA/5rjx7qhiVzbTuYEDPQ5CiW3F3vymuGud0M6qPxw==","shasum":"90c508d5e5cdceb76de3191b26214010a3bc5c41","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.7.1.tgz","fileCount":16,"unpackedSize":49642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZezrCRA9TVsSAnZWagAAQhEQAIsKndrdwsjOmf7cYSwi\nyvoS8VNU1WIgIZ2dvJ4YIqJs0P9BZPwKqdNCu/XHRHn78nZtSkbmoag4wfGr\nhh8tc8h+C/Jy3itENkUvkIdHHu7a1GKyHEABLsblufwCjlxrbgBlJZI15/mU\nXLJAbhqkOdQGHw5cnoeTnB+q49VAt4342QooLbQTgyTQFyLia0ZVfCl+RxWW\nxL924oqr2g44vT18WWoMs1NqeJ4EamYH99dG1VnQStoZnLSMkaJrCzFjqBoK\nKFtr42VzFfAAMd0CsRFc5gsXlB/kMac8K0ktarlTD+7lukJ86FQwWXFPyGha\n22hJG41TOP6DExfo/VyA/8WcAClCKmkpJyO0gG+BygMmd/dSlg4d9Ub2oa+m\nlrdgWfysxov/swW3aY24Z7WP0o4s0TJD4jdPLVMjBNyXBBEO9Ti5vP9mZyUj\nWYa+Dthxe24oKjUi9JkbokMfoNd91Q0hX4maq/OZe+Be1oi/n8AwI9xOxefe\n/WtVdlRHtEfscIMMaUcxcTSk0bsIJD3d8vfQ+EoTTN/7chojE4rPFhQMUBv6\nLApsxhH0oIOl3NfANfNlKTHyP7Ja3SO7OgnNEkjXNNK+NNW+crc7bCIkcQyn\niG4i/Bnxo0qtcwXkbLSNu8n4rTCfBkFbVs2txzenWKpBgYUc/PBvconBQpmx\njzQw\r\n=9bwb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHxGeCpfsOyod0hExY6APekOvCAjP4jlQ0xzB6oyQluCAiAzxPkdncwn31pMJxS9PwI2CCetTSDmStwNrl9uggLIBA=="}]},"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-bar_0.7.1_1566960875332_0.8401763018884201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.8.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.8.0","@material/mwc-tab":"^0.8.0","@material/mwc-tab-scroller":"^0.8.0","@material/tab-bar":"^3.0.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e47de0d9d6e556ce8c4b0b92f87be25a3e18da79","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.8.0","_nodeVersion":"10.11.0","_npmVersion":"lerna/3.16.4/node@v10.11.0+x64 (linux)","dist":{"integrity":"sha512-8tV+TGTfTgaMEyYu4WoZhZT8/xs4NSNai70h9h0Qz7Nbf49IiP8rF4NSKsaTdLcNzcOZGzUA6LsKtIwYVnS+5g==","shasum":"a0329bfc2757ebdd186bb989c9df2ebe893e5b93","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.8.0.tgz","fileCount":16,"unpackedSize":48584,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdbv+sCRA9TVsSAnZWagAAgeAP/Ryd1W/g1vhbzu9xQ84Z\n8ZFqj8SNbc4kGZFlqbtEESjf99uTuD1eGo+mjPquOTrzOIGtTlSKXQlQE4t3\nbYhy/+hV2evkYd+WUnju5WnPiROJJMm7FhK646fwug3J71eDM9YHpLwE9COc\nO93otxCn4aVLlzN6UOXezjIOQzXM1GQzLImNzCPvfzxLhMRd6fVZ5AtNCoCf\nPbEXH7NvnXEdAiMTRcd931DdTlC+LZ2JG5pG9He5IjFvPbyM4n09mRLObNiW\ncYN0nO08sKTJm78fS0rNmiYkRo89WUysIBueh/Y9ckXxf92rr6PvxjTb+CRR\n9SfOU4Su/1I3O3oT4kd6+CjhaQ7Zik4yZav3i2dA9ojDdTmOVj6ab37MqUnK\nfOjQaXfTAoOFoWSXs8ZzrfOzfR/1HTCTQAniM4Og02qUFAWxUCmw3mTPoZIR\nsiQsXztyaiFjevCuNcF/tGQJC9ErVt9LtKaqO9V80KFOrAUWpkESJFgl6+ve\nqNUTWAahmOImW8qrsNsrVx3bcAGa7sgy1XfDBRJjFsgfIkkZLY0A3F55vJO4\nbDpevVLgZxBySs0UR/BxTVCQ3D/8n7zhBGPVPTcM1HMkcydVJ31leJW+YMWc\nHvC4NukW0+3+srlyTMZipEI/rIAShpQqePOWPUL7dX+sz99DtCVQRrLgdv6K\nPkna\r\n=zHOH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCoSM+Z5P01Pw+RhsHSnk47R7eieiKt6hCe3lY76kfLFgIhANXljuPu/AwLFkIp9Zh9jw1OI3xY2VTNBUcYA6+MqXDp"}]},"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-bar_0.8.0_1567555499931_0.6939159965697896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.0","@material/mwc-tab":"^0.9.0","@material/mwc-tab-scroller":"^0.9.0","@material/tab-bar":"^3.0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d6db9ceafe4b21572f967ac4acae9189da8c9c4f","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.9.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.14.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-ukLEEGiilO1LhEUHZ/VxEKg7p9cU2dlS1J6PPebLmuxaggMF+35PWFcxxmw/u2xK1B+R8pyn89raAxRLWAhlGA==","shasum":"0b10bce8276f02b3c11103569a8940b66345dc66","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.9.0.tgz","fileCount":16,"unpackedSize":48543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjWedCRA9TVsSAnZWagAAm3kP/3GbwcMK0pE4irj6+Y8i\n+/o0eA6+jt1H4GSRlDwPvTWXThC4BjM/HKJaHFwZW/B7rdmTT6GQT6rcHdD+\nL6UyGMwdW29G09o+BKnFuFoRhG2xPB6c7XhVIgHikvLJq/IojMnqjwVoYfi1\nlaEWLHgs6FPDQNL80QZSWw4Zdhyc/tn6KmBEu1o/Ly3aAuA+lKnelmcwh5L/\nFrlH5s5zNMq6x0aopJm1xlZc7Cj1wfWu9Zqb7ABKGxNmVgcUkQHuwgcd4iFW\nL7NG/2fY5x5j+sKjkyVWIijsEBe3UzKwe6LKYl+koQMiWKtnhZtd6bktkRrC\njfKM76+16JVuN1DHgkCe186d1eZWOsYtkYq1ZRCmcl1aOEvolerS8NE568zp\ncYuYd3lrQM7l3bmnIVM1gvHvLM4zCeASGhgJGc3r1SysPvrs3SmiBuQrYCkK\npHk/Zz9Kb2gdnwwSdg+axeBuOvOgTCmhQMEvW0gj/WOo03f5eZNAT429oVTT\n84F+UUARj3wd/9wiVpWf/fiQJB6cH8qrkIUYFaKL0MW5W/nUwHheGfLJjIku\nnLnomipPogaLbKzdz0oNXWK3uDYKbsYYS15sQThoTo0PSCm2pzARkchjDcqu\nafZDkyC8JUb5PAR7234FAXeDPGK7ffT2XrzdJv719sdP/Vve2c8d09pDVSyo\nyFzf\r\n=usLn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHwPRyaKQ4jWaNwIENpvbkPAhJXAjz7QdBX7zRhXi6e2AiAzvfnHIaVGO649f6JFgsoAzWZG3ZOTFzBQjStpvinu2A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-bar_0.9.0_1569548189002_0.7877158579509247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.9.1":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.9.1","@material/mwc-tab":"^0.9.1","@material/mwc-tab-scroller":"^0.9.1","@material/tab-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2b2676d71b8d393aa61348cb8e3d9ed03dd8dc08","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.9.1","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.16.4/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-mVUcokwxn0powXntA/6w0jkTHc/bUe11TQp6rmg4hbvKJIQtSCfCXgv6lqTZSAQLpsHCtA4F4R8cU4Y2aIesVA==","shasum":"4ca6a0ebe93fbfcc4e0d1c8a93488273c899742d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.9.1.tgz","fileCount":16,"unpackedSize":49059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdkm4WCRA9TVsSAnZWagAAItkP/Ao179r0C8gG+E+N6KOh\nVAt+43F/yTpWEiMcBp48pPefi1kOjAbheMliAEmCimm+dFKKJv766ukYrUiS\nchwZjVy1q45cLWABPiJVuoPNdqnwSyYl/gK8FPMCWBcTzK0KNSIWL7xVsfZC\nGuEFHk/1Hw4813qMwV33vCsRZW1qNH2Bcuw0k0XAMKlNT0/z1AfaiXTwy5Y4\na6FlCM43V7ZUheZkDQi3OZ4znWMLmIxifvHC+CDUmjcdE/K/7Kt+LxVBtS2c\nPNBIiqyrIt1rjNFvJRgG8lS976Aj6XVJhN4eVO2I+loBum+O/4zBp2xLIKwb\n6Q7qJtysyxnBg/nGoxxhqZSD9YkI3Vc4ttDhMlaXXxpkqgbDd2rR7rn+38IW\nCEQZbe/0NoyQLF2hq/e1cXbEb1k35V9y/Hx2D7D6RZ/YX0NjEb58+/I8EmQc\nxMP9Rk4hNNhGkjvhvhWlrCt6y6dQR75tq2Rtul3Q2wA5W3lzc8RL2O02RCbn\nl3vFrxQLE8ZyyREfrWrg2ca63ZSiA4Nc8oqk370/UyMoV76eLCawOGTLIqrK\nUr9O0we0IhwNBmD8cCocoxyNpu8Ochc8P3HS46WyyLpB4cQGWDCjMX9n6POd\nhylaP/SS6RSXaebFAkCfW2Fn6ctALaT7e2j2uHYE9t3fvD5D/47QH3nU3tKi\nvmgE\r\n=ZMX9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH669jsv5oNah/3FbcBFpL71o7YRLuLTsYDgGYMnArGwAiBWB7/sgIi6ue0/tz5DdJkTeyG3TKQaIkJkkeVdEI56+g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@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-bar_0.9.1_1569877525326_0.43433982201715793"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.10.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.10.0","@material/mwc-tab":"^0.10.0","@material/mwc-tab-scroller":"^0.10.0","@material/tab-bar":"=4.0.0-canary.e851d4f40.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"631e70e3a39330ccade8210d1a72edc0f22ddc0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.10.0","_nodeVersion":"12.9.1","_npmVersion":"lerna/3.16.4/node@v12.9.1+x64 (darwin)","dist":{"integrity":"sha512-Uo+HiaUWRhBrCCQxmfZgVeAVS4tjqj2JpSXfEyoMi9mmprOVLD2pEY1pb/fwsfLsYhoA0UjfD/t9wn+8sTncgA==","shasum":"e05bdbf1faef01eb3af0ebf0c402a62e61da3a65","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.10.0.tgz","fileCount":16,"unpackedSize":49088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdoRAeCRA9TVsSAnZWagAA5PUP/2aP1pwoPQC6kQzWLCpW\njMWatQdGPFI0QA1plUUE7+n63sH2C43dpmd4EPfdhR6xSrv2QG8VJyBKu0Nt\nnN03kMb9J34jmSsbOCdfQDFRPOc3e06ki61w+DSYqi2MqI2t+jH/3DQ+oSUQ\n2bfg9561rbXr32ECHUL987uP+WRNOWzMXh2gU1azD1InmbeL3Vez22O8Im7t\n2KABHushgFvV6N3daF3iG03R7ly5HGhvrfZsxEfZ5JoDsu43tQyfqAM1khbE\nut6dvtYxQCWvyjlXbHJbS1CfCKR793V+4vePDadXzcPwsogurwp3LezsqPK6\n8AS9Hs6JefccGj15+VHN5KPb1Fq9d4rLbyL1pnpwRO4zIm/y6wt2nMM16JGX\nCYpgVZqjRfOcUgmgiAVMUuhcjLjYwBob4Zs5iOoB8uKPSxXhvPj8P6Y0ffCK\nwNUMB0SLC5Tjf6pV1ze23/cKciMyYKC4ZTeu1Jwr6I+wxbEV5fb0QhIDPQPg\nHxTva55snNrslUU5yr+h7c6b6TcpgX4QcD7niN35UsNQ2i39LKS2A70QCZF9\nAazMH9rOVTCgAHU0hDIOnzUptS7Oeu7dl+qYjUG8sZ0/5VBLNCm/jZATv+cq\nknnWZkuTjQzDtvoKAupWRoEiqQXjsUOXKepCLzmrmjQ5sjkhSd2DgDZGgW7q\n7dM9\r\n=sMsS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMB8Or/9DktwIG71e/bACku4Y3FWuTqXvOYT26cAIeygIhAIz/eTI6MqTL0bQj8ID749yVSmFeaztoYI6s+oICWCbZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@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-bar_0.10.0_1570836509636_0.12526279587522282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.0","@material/mwc-tab":"^0.11.0","@material/mwc-tab-scroller":"^0.11.0","@material/tab-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"147d9789d99bf7a5ed28f6b066b8db58f5b9ab0a","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.11.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-750mgJ8S+edYOomqWfPO5m/JuuI0hyNoFVeaKGcuyYUG3AQHpj/A+/Gwp4dW/eG/CxfIxpiUxyKdZfJiBro8Dg==","shasum":"9e96c1bb8a6c8760f54b627c7da9e3a6b20777d2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.11.0.tgz","fileCount":16,"unpackedSize":49088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3Z32CRA9TVsSAnZWagAAIMUP/AjgyWgiRyIO5CS8Rcac\nQb46NXxkPy+bTkSL6+ic/vewkas2fupEw/pOaP+Rse89BTSa6BiH4RDUaFQf\njNp+CVWDRViKTeMlmtdzpQXM0KZmbuJhLj7F9PeBgc64tsjatLsH57j9xDHe\nvfUwscPioM3p8LtIjG0aEWVpyRhJJbt12fY3u4ONhk47/v+0DMDddEdJaBtz\nARYCqjEoF1dNIGvZBTBQVbmsslxNoSG/m4mXrBL1DCpwYgo/P/NHKYaNfFdv\nDKhp+G7HwyBOyR9eh+UjNi+ASA+gElxEB8Rzt47lSquY1gSSWy+nZByDlSIz\nsifbVs3D1D8F1tmyTRtTbBcX3fHhMZTf+uPz9XmrtxZbgb9LWdrGTF+e51GR\nuFJqmdfGWCtwTZU5o151z/7/nU4QNhJGT4c/6q7pEy8wEXjsTnlr43Qjgcan\neuz5pWl/TS7yvHlPDli7O+uxNEefl4CLKs3VtO0JZkZwUXQQcJYYw5zzexZh\neSgs/WqYwDAQ41MZrPvMKepIbgPXlrL0ULl8Wq+aVZdAd+kkBG7py+a0UslC\nA6E1wT+D6Hbi6HV3WcUaW3iia9zGzlY+MmcbaYLD8U6Bjs9dTaUz/Ilc4h+e\noEfoQx5o26/Jl6UfiRx3WkPkoyGQckNOGc/R/mqLaMbiUeluHySAFW2IQ9Lf\nKQLg\r\n=X3Wk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCH37N673dHL+ZWdVrgoUAA8w7lz4tK0rL3ECEIKhwYugIhANKlrJrB/o3lGO8pSUtXXoxb7gQlV9+Hfqk53l07K/xQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-bar_0.11.0_1574804982406_0.08347864493375745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.11.1":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.11.1","@material/mwc-tab":"^0.11.1","@material/mwc-tab-scroller":"^0.11.1","@material/tab-bar":"=5.0.0-canary.5729943ba.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"395c02244bf15c2658cb110eb405ff2e4c0477fc","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.11.1","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.18.1/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-9fL+snTLLyYzm2odsCfhDk5AhdEu+cHQTHZGD7vEMyjUB5HdaYzQd+ZHQdiOs6s9ZqsSTuHjSujIi4gNwPZTDA==","shasum":"1c633e1c160550b829dd7f694a347997b57c496f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.11.1.tgz","fileCount":16,"unpackedSize":49088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3cLMCRA9TVsSAnZWagAAy7EP/j1g/lLwjp3cVGGqFiI7\nLRCsi2ezsmQW3z/3u7L35+A9ZW2fRZvNbKVH0BdTYnyqCkU9G76U6CcW6Fhx\nzBIW75/fWH3p00bQltkK0acndFP71Iaj4kPV3nXiZ0ad9M5Z62R0jVaGeG2u\nIcugHgrPLLd9A0AH0IMAkfVCTVMLdznUiLKsSkRT1p9DFntffN0h9/9t57ge\nneTuTfQn11qxnTnKg+qoxxCwRRB0WmfTR+KOEaLqk7nbIHhLHtJ4LJGHVrcz\nvC4upzarN6wIacwVceRA4NLA7yu73Uw5MRo0jVujQnaPH55mhKPDGj78y98H\n824RkbwZ4FvfQf35mresZheoXVfY9smKq39wWXHex8iEkUERv/Lb8ITXiIDw\nD61l92rH9w3u3Wp9oL9TkDHaelUTicQ2D99UX8kybRo7WvInno6kQnjOTysK\nEHo+fgkGte7ivaBBiuyRrPpmuxiSikj0HrW9uPsqhm/6Ux3LKEBCwXUFHiZE\nBTGLvUvjy4mEl9f88epNNDAa0+Nh97TTzGzdWQ08cLQXNJ3i/qrsGoYUFdZY\nuuSsuU0W+EhGcQcycmo7do8CWHcCMDaY7WWTVvrT+gXEnAI36sjBkSd1z9Fr\nK8jIVGN4dVSbTNGYMCvJaaTp7Th/JpNaBuaqD7GXig0YafpOlBbe0g9t0Q77\n3YMy\r\n=Z6Pb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnkhHllYroqzCj1um8g3QZ8RxibRgaj0DXMWYew5FVXAiBlTsqF6OMgurk0ebIkHhY/p023tWu3Owsl77/tNQhDQw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@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-bar_0.11.1_1574814412441_0.3434647111202962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.12.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.12.0","@material/mwc-tab":"^0.12.0","@material/mwc-tab-scroller":"^0.12.0","@material/tab-bar":"=5.0.0-canary.1c494e567.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4c0dc16b89066f24fca4efcf78c36c87657f0a03","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.12.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.18.1/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-z0XrklDtEdzJJOsD6OCvP+nVNxvvyfJa5/eOXTwwtCFIetjKabgWCOu8gg1m7y8McrTQFi/cv4G9BlVMxmTXJg==","shasum":"4e62a98e84acfc179c6aee977ef3e7b70a400703","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.12.0.tgz","fileCount":16,"unpackedSize":49088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Wk1CRA9TVsSAnZWagAArXoP/03qjysHj1HiImmuMF2R\n+ZYVl9Lvcf7cn1LxIkyl0nKIMG28KOBxsf0SPykEkfS1bfUTcLxGcQJFf1Fl\np9426lQyOSMEqSiuiG8YI8qWrEXdLd32WNLUuuB0EDgYAHMX2kf3otx4YxlN\nwcbfvpTLc0gedVEGNoatizSYIq+xvrbL3CJpWOAqN+bJis4BrN4LthYTOruO\n4xHlw8eAw8QiLO++C48HYkcf11gOOKXSQC4cSpHSLtVJYgXY9vbwq1K7ibYV\nQDWUj9hHk1sDDbitlfuZZoYmk/qe1Buv1h+FL7t3J0P3pGIQ/yO+4zZQyLoC\nOW73CcmxLjnvZR1EjzPA7B31qIUy2vFxI6c76o0XchLySlEiD0tw0rR8cqMQ\nQkW9V12ldMNlNKjIQa9M4mdr7IGHw5kOzdJH44iIPra8dRJJkvdwUFRBOwhE\n2UeQCcganHqi3LHzd6/uaMsr7Y+MrqoiCIioFaMagVbtpW/xCc5O4VViy1l6\nuH6PXCOOJpF+oSbsuoI3mFhsi+2hkgp7ruQCbLJC/4XVXhhfRJ+m+SZEzrHj\n64VGxTDkcCqRUz5rqX7fU9plCRVGDRlTv5L/szZyn3vj9LnNz++bxhKzoqat\nlR4IoC9ZsmN6X5JOP7mOrEG39AkGyd9my3Xo07+YVsqXXehI2Qdxe3Vf0cCz\nmmDF\r\n=9QZn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/JkDTwpqmer4jYYwSXuF1wUyLUUJP0fiPCbmcO27x7AiEAow4GKQBrkZEvlEhBdrkgqZlRQI+4lYOzsXDnk8nApnE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.12.0_1576626485074_0.7904166964529322"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.13.0":{"name":"@material/mwc-tab-bar","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-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.13.0","@material/mwc-tab":"^0.13.0","@material/mwc-tab-scroller":"^0.13.0","@material/tab-bar":"=5.0.0-canary.a1a0deb3e.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"054d0d234704a274e8aaf7d8a8a0399f525914eb","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.13.0","_nodeVersion":"11.12.0","_npmVersion":"lerna/3.20.2/node@v11.12.0+x64 (darwin)","dist":{"integrity":"sha512-5QSWMKjcXEvV5KO3Wk4+iq7CrTxWOjJTEvUStoK6kAopWi8pALlr60n/CjyzavIHgt/Di3M5GTBrMZtUHJeHYQ==","shasum":"aa7d80802acf0c6d7bbf5229cd894400a21ffce6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.13.0.tgz","fileCount":16,"unpackedSize":49088,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOPc4CRA9TVsSAnZWagAAHNsP/3AywvEMnsiwlmQsNM8B\ntG7u6WuiNLqw6khbKYzv0uD10S7bGAG3DUH8+MqvSeNELWApvAdLTDwd3n4G\nCPALNoYO7ljjOuKV41CE4v6P6b1m/hD19n9TCIjnC8wMbmpOtWBrBJrXuFFA\nIW8nCM9//AQOIxHElYkpyK5AWPtCMYfIoJKilnoXWqDPG7J0FLwNHUUAhjeG\nuZk5Xkoif+S2CUZbaAd+cplyOSDeRuHKowpBs9Xu4YbLtEM74xjekHU43NCy\nRf860P3XY1eCgYMXCLPSTNTivD+K6jdj3A4W0u+GQGsnGZ3SX4sFvjv6ej9A\nbQvAcGVjh1hI6ujvKyMF4LkwdMC6h/PTGH1kj/e8I10I5NZacj52gh7ltUni\nh2t1CjIiphg7ebnteJxzzulRQUDutI3sPkLXigINIMdOXQ25/fSkVx+70f2i\n1FtzGu5quUkvbg6XxRAaWpLUkK5wh9KBt3+dLvbXmjtCwq12WrEziGr1/dDJ\nJkBk5KPgagkBtzKqyr3lrbwx/L7fibr/zUCcCSpEfUgTPS8tYpf5tdsIGzHO\nL/R5PvmuxPwwcaZ7C4dW8Lmx3DJBMRVdHGLxDdL8Ite82sxglmiCjgfHAwXt\nELUiwaA+8OK8WdtvLnGH/TKIOvqnWOgnlCSTJhGQEnxTgabC15Pn9XO2KBz3\nyD3K\r\n=ZYyd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHKeulW+Y/dLXUXmVWqL/eQnOh4/B3JePdvr8XWRwEZEAiEAznAgJH+NUBgTLW0pZIVQEWfvKDoUdAZoi+QOIu0MK98="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.13.0_1580791608032_0.3608789331077382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f790f713.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.f790f713.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f790f713.0","@material/mwc-tab":"0.14.0-canary.f790f713.0","@material/mwc-tab-scroller":"0.14.0-canary.f790f713.0","@material/tab-bar":"=6.0.0-canary.781434a92.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4ccf0f734c9b727a925e62b9999d4380351c7936","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers 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\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ccf0f734c9b727a925e62b9999d4380351c7936/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.f790f713.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ERwbX8ylZ8pkq+RwrL8XA61J6dnpPzXy3URgQhWKaxvvXgnvfL0mKm86ppsZfYa5WBIQzFAcw71zGMruqK+XBA==","shasum":"017207456235469bbae78dea1cfd7b49ccc38b8f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.f790f713.0.tgz","fileCount":16,"unpackedSize":53303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWHreCRA9TVsSAnZWagAAqz0QAI6GsJtAVoLa4K+FVHjw\nNu6a2aZxgGd6c2jlN3dKn8jp5iLojwoQs5Z8wWVnLYMhBWngYw1DdvkchIZu\nJf0p1//obfpLLonUNHKaDye86GJCA5yEvhRVhr9pIQZUvU7/3u6K2U7hqaZN\nuQ5RBAsIKFONBOcq/wNwPEYnygT8SOO+6JmQsfk4ruBk+cWl6fWLNh9Q/qYx\nJHkz7EweBMV7OAC0gIV5KrtKmPe3pG/zD5sw5oUiyzNFDnBqwmCiln52oBCe\nE6cfAUNt87yKW/OjpF4rNZ3d5kPjgbLf9Vf5c6ewJ3Vf6IE9XA6QIFpjVu1n\nwIyR+GQrgGKF8xWKiz9fY3IMnIAYz+Nc2WfbJ+Vm7+TalnQUkTQBT1V+aMSf\n+Dq1oMufT45GrCXzIZscCtB4tghUrnHnEWMXmvUQzI8aoLCNrbBq4lgW2NMT\nlsJ2MMLfp3kUDnoJprG896iBhCdFkHpgZ46iMYOYhjf/yqtYrhYSGkM8S2zO\nP8GXnfVFvf7QgbegmRsNjKzYJXroMf8l/NDUKHWR+9GNy2QvQgVKlc5XJM/h\nzBkp1bleZo5X9aq6Q7+v04oGuBuAA/lCeRe7MAAez+Hd37sWC4TUP6IJPymf\nEuc1yvjTvEu/MRX9h1ILjM3ZzgnY5mlpmsZsSaSqKfZ+AYFwzaDjb78s/2KV\nnnLD\r\n=jCuI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6tnANVifiF757y8sWEyvXApjOO54Kkfj0FTFErei65AiB/A1QeWCOW2HoMqHH+YwGnUErndN0xZTX+Fc02JV3n5A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.14.0-canary.f790f713.0_1582856925728_0.8989566980911836"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.c759cfbc.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.c759cfbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.c759cfbc.0","@material/mwc-tab":"0.14.0-canary.c759cfbc.0","@material/mwc-tab-scroller":"0.14.0-canary.c759cfbc.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e0a8ac49c085c004f390a2995879e67aea1010e7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers 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\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e0a8ac49c085c004f390a2995879e67aea1010e7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.c759cfbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-9dhQBgt3LKCyB/dQsNDOYT/2MYKAQP37R/7g2iIw+MYvjqMI2OgZpzgwV7G/czr6EVRxXqYT05TPjjZst8bKCA==","shasum":"fe70e0ce2f1b0cb13cda20e23f846b04cc8fe7a7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.c759cfbc.0.tgz","fileCount":16,"unpackedSize":53303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWarDCRA9TVsSAnZWagAAS+cP+QDZketO9UJE3fOuzBRx\nX3+qG4ACuI58H9aumwriHhEt340TsKenX+tisKZI/0dBjn/SSLNZQ0jEKNJg\n7aa6PkYvwNmSQv7HyGAA0n1fB3VzreLIpYRlVZwgTTWIhkyb3tAD1ySAZc4r\nMbdASWSHX6df0ah6Zq4PvmYfu2EaxKQdiK0vPlszPQagmJQzuAqP0+jhx4z4\nsEds8Q7BZvqd6aNOYSWOh1ZZsYmUJSCaSgjSVph38tmDwfSMVdPxBLa8oV5j\nyJ/w2RtllQBPHm8dcU2DlUK5sSrdNJBN0hZS4pLsjTme/v2GCqx2a9yM/1Z5\nT94MsafrvlCBSmAyq0avIz+nQHcOJAQT60MamwYIRqZoI8ggzZRo67Nxd8bE\nsG27bNNxZgNBVPQ/zQaq/QcSv4dp7wD4P7RY+/+wnBHAPeAfjs7AxUDg2Ixa\nb/JiPddfCZw4QVg788rXlkIyTUhG82Xx2Xn9I/9ocyngT9hUVeCArK1x0EIs\ntwGhIk/rV6Mq7YfErBxb8FwRL4ZwD2sG4DKsdrtaqLgLehZ9sKxWoOgzmqM1\nPsGkypZsSzY+1R8PW8SHtvh//C6BpoJ0XdqISs0BXeqZnZloxfOr3lODzkbd\ndvH9WeVWlZrb/dJrFTbE3k9s9/VQIaToj/fh3f+aMNTIHjQxGB+Owx+g7Rv6\nyVLI\r\n=QeZj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRqHj3Q0jRLs9CTpg4EAg5PWfOAfnHAJSp9HRS+FVPtQIhAP1FSplPP2kWYLuU5KcUmwOuO62+u6nT0Q5ZXaHrghRj"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.14.0-canary.c759cfbc.0_1582934722702_0.9757347121231754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.97ef53d8.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.97ef53d8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.97ef53d8.0","@material/mwc-tab":"0.14.0-canary.97ef53d8.0","@material/mwc-tab-scroller":"0.14.0-canary.97ef53d8.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c6865476c6b2c4ccebc9f20145aa8fdf93e1252f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers 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\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6865476c6b2c4ccebc9f20145aa8fdf93e1252f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.97ef53d8.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-TOUegOYKxhW6081y38Gwx3NtA3ndoTNal1Mz5NDFfm8urFaOM32flwvssqrfHnXendTkzVf1a4XVzmEWoKad0Q==","shasum":"06b3bc2a8bedca0661264114915ca2e465acc8d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.97ef53d8.0.tgz","fileCount":16,"unpackedSize":53303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWa3jCRA9TVsSAnZWagAAw+MP/1+xD71CdgScEDG7JSmN\nZ2xON8qWlRI1Ic9jR6+CzbfNHDsPP3ZrB8tO7fg7jE/4H56wHf4HMTMtoetM\nzuG6UmuNdY/0VH8foigSh9k0U0Mr/WjxBbx94Zq/sphxg9TI2VfUGcc+Sb/9\ndVjLNOiaFCVeDhTqWUDsC9dbBMWQPRe0XbhwgWmpXi6qHORGvgvUdBiMbCm/\n9uhAbc9+Wt6TU9/2EqEMz2vJEUMrGKBAhBGscL9cDv1Kxje37umyEfULavNA\nAUtxDuGQOVGOD8rF8dk1eime8zBsnwzzxQ3CkCSUfkLI6qydZnX4Pr212AyZ\nzF9LVb45/L5szrOTInRYZQLW3QXB68o+6hj620p8Gn6mzf6uNbSlnJswbpaZ\ntD96VeojPljpRy3vbwQ5+yJT8fGWlvWQGsIKuE3azWivUabWxssbFDbYz90s\nusH85KYFk22AvLbPmkHAP2P9YqluTpTGyPv87sW3SWgu3H86d1k2YGDkzMht\ngJJaN/DZEgQZzrfndAFGz81IuE2cex5iTkH7T5BJBVUcuxEmt/539ArsqMW9\n9LoOOW3aLlc0jOnj8z9HMIkvasrscMr5CWmPaQknZhl9ZouKl084847glECI\nTIqZW6nYH8vS7ol2TUUkx8JOxEi87vD1DyZNmY3nirIVMcP8ripEznSt4tTm\nCh2V\r\n=7Wtq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGT28Ns4qEdW6muUVbl4Qwcktwv6y15gDYAVFueiGefPAiAXIUZRdj7+NuQUtO7+lYoSe10WNTyuniKuuaL/EPd7Lg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.14.0-canary.97ef53d8.0_1582935523197_0.2846824834859085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.24f5fa6e.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.24f5fa6e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.24f5fa6e.0","@material/mwc-tab":"0.14.0-canary.24f5fa6e.0","@material/mwc-tab-scroller":"0.14.0-canary.24f5fa6e.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e884595521a6f82f63b8dec96fc4450410e37a09","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers 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\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e884595521a6f82f63b8dec96fc4450410e37a09/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.24f5fa6e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-8OYm/7YItGN7W9DsozfQ/DRlcZsN9jmJnIUOSAc3CY92RB1ZNzQK6d5NBBAhDWxmm8TGeihXTzFgVvp5QO0uhQ==","shasum":"20c176a9fd2b0a3dd13838d6b9478c813f6fb3d3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.24f5fa6e.0.tgz","fileCount":16,"unpackedSize":53303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWbm0CRA9TVsSAnZWagAAW5YP/2X6EExzT1IaLep88IQV\nK2KnXyp6VYNBsI5HdJwwcAX7ulMwiJxHji8suiadgeuhtey/NuV3Cuwy1/bX\nahStRxM2NPqqNITUKeDyeJTPpvlO1XNhpUjRTj4zlrD2hOdWvJ4ARan5EHOj\nK3l4XpzIedcTpnlRWzNzy0pK87rZirLv7LdumxFXob+az238S79B9tRMlom3\nAVWUrfbmjErN7pa9/JZEgThKuO+yymP/4KxI0i4IVdSKaKdOsNcuguvvWnZX\nJ52y/EX3K9fsVd576FN9hSfw6+CmWC4ja7oS1Kcq1wPfTJis5sdFfuyPe8O9\nKwA2iSYs9W0wD7Gk5RVOUsuGlUnoFGMTWgKx4QICYQi2qDdIf3iGGjaaabgP\nmYGwddaEPuJ+Sc4ZIJUhx6DG6pSOBCwkjGZZ/SlbZAoMNgfBTgTlEYh6fr2o\nTEpMno4qbDLTfet9PDg2tOpRxpHVKC61MK6kvc+7nGyeZEaHq0Nbi44OXGWh\nbE9v/zM81/zymBifQZgTecT2dSCYpjLLNrc9jLtFAL0l3CeTZMFGNojgv4+n\nThtCusjsplj5jOy/jfTGtngoljvqL25kiCOrtZjHHrgEeW0qZoiED8i9sxCp\nLbQMk5nS7W2U5ulbV6g69GVzaZ0IwUtav72B8StgTFlGs6/cqp+N93AKXngw\nSRQw\r\n=oHTl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/awBq2XpmIid4E149Wancs4YcwonRMziOnNhm7TzuGAIhAOOz8Pu0E4ce+lljizkg4oFCx5f6r/fWnia10Z7pbjm3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.24f5fa6e.0_1582938548269_0.9014405098880187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.960e214f.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.960e214f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.960e214f.0","@material/mwc-tab":"0.14.0-canary.960e214f.0","@material/mwc-tab-scroller":"0.14.0-canary.960e214f.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c56e2bea6eda03e423f3f7ba00cf95f684660f2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers 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\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c56e2bea6eda03e423f3f7ba00cf95f684660f2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.960e214f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-dsHNMy1nCpjaWaq1+Dyd149qlEg49iC7l+G2ptYnVMQHtVVo7WGUIn2eq71Wz16yFGIwpUJlJGFEnwbI76eMXw==","shasum":"2ffe4e8ce04c5469f4eb8331805470c84ba83143","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.960e214f.0.tgz","fileCount":16,"unpackedSize":53303,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWdXoCRA9TVsSAnZWagAAdQ8P/jRo7dqOwa4B6HUEzUJ3\n2deGxAtxM3qpd1TaznxMCkQmx1jVhTdLmDZ3gNL7lcAfB1ToB3xBDs+d/FH6\nAGllEvIh/IaqgZJEEiGFDlPSqQp1dWBaSjmJenenvSotwHiVUnBTgDUytUQc\n/fDyaLX6LhJqnBi6E5ZDs/W1SFXxYoDAuKzYmQ1Sk1di3exhLUf62DAqfr79\nZz8KxhQRboPBCI4oOCaQhfE2jknRdA6T53ITqCAsBQ2B8h3/3Rf6IiDiKbgr\nQylcf5Uz4bJAeEDI5SgcF8DpSwD5u8I8Y9q40w9l0TfdM6u0fnEyIusf31Sm\nAZWTm3qmVo3H6q5GIxquVl0PtHLTrHV8CpW2vznYU7AAL9n9XbiCPUY9xMUj\nLM6lELdz/g9hxUDhhl89N889r85sNmty7S/Lfq8B554A9tUlc6iDfQv6WfY4\nhAgJeAkEhq+GXif1mhFkuQjBgy6J5KedPnfkm2SrYnLv4I5jFqRloJTHrgWj\ny3RIyKfuquHwtzj62qKdecsxqE/U1nnM3DJDTg2CGOUcF65vVWUqvd60sqnR\nxrhXvQo98TC3ILhbuUFntLtpvv1PG4SGwkeGdJuQhvHjUuzKf3YL4CklpBQQ\nClkU1VihNzib/l+WvUgBRhAB+mxsNaJgpscFTCH8CaUefaFuKjs+vODl++LJ\nodLq\r\n=8aar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC1RvL5ISrMVQP2vPwg4oq5yGJx/jAab7pk10LLq7ns0AIgMDlz4X5jcTDd3mTL5bq7Lxz2ORRMUzM71G1TynIVN1M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.960e214f.0_1582945767842_0.3529952542750383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.a2f046f5.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.a2f046f5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.a2f046f5.0","@material/mwc-tab":"0.14.0-canary.a2f046f5.0","@material/mwc-tab-scroller":"0.14.0-canary.a2f046f5.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b2845ca1286088f29e79c96b6d5c5367873cce11","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b2845ca1286088f29e79c96b6d5c5367873cce11/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.a2f046f5.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-X2dn1xGPkr8/VmQuBNU1c/a8H564nxtTaRc142FYC5WlxGGac5hfulfvp3EIVr5d+xZ9BjqLRPbF7H6XjsqWWw==","shasum":"ff54ca72457fb58da0ed1816d29a06612e458c0d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.a2f046f5.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXatmCRA9TVsSAnZWagAATsUP/iHdu2vRhxii38/YM5lG\nwAqFtY1upy/V/2Klrxg6q17WdcH2kr8D7fzUEmU7RzTQDzxrciHMYA1REsV4\n0YXkzxJL7BOnimCsk4fFH5cxaHcOYErckxUGWXjNqDO6fcD2bk68D5YaF0xg\nf++3jM0rIkyK9+wZoBaBGKSgmHCoXhlZi0DlS3bObtyZ3c/ioNuttpPz0PZu\nr0t35buxBAf7vQbojMN05k30bOH1VGc5Am/SsX/+a56UQ8otdV8zZudvdoUZ\nafJhxW8pXRO1m22WPKndM0eIDg/Rzdly2yg5gWMtcpdoFK1cwKjpzGawU4dV\nfokgM7uuu/as/q0k5/sX2o6Qh9p4/iLnWnHH8/SCUtWzZDQOB0Xo/8opH98v\nmcKgxY4buloMrV3uDrDaUOldfPd4RaHTzKFwuOlmnsi8bvjLp/D313ptGFNw\noTNvBQZCU5YD4vr5iRrqlzKfzb2sZntF8Ve+/8Ck80CO/J7eMiBPr56MHYQo\n3Z+BU807LOoRGysXqJa3PjYgOoTD5s3EI5vCAX4f8zCJzWti36w/RvH0h/S6\nJU2nq63ZNjlJYArU1T5zbgkVGG5KN4kh53tqCcm4edZDnl9EyzuAuk3Pjiko\nOmoWbRLXJ8B25lB3SSWV3YGo33ClgaMEP4wYxcMoNTylfozjzgSuhBby/b0g\nbYpu\r\n=qsLG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/IXy7SU1b2snlN7XXmADZkqmVUBR/7EXiDVpGazuXWgIgD8k4iEMyZJqYceCl1pKokLQM4hz7xSJ00LfBBOUxexY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.a2f046f5.0_1583197030119_0.2575977556963722"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.024f371a.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.024f371a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.024f371a.0","@material/mwc-tab":"0.14.0-canary.024f371a.0","@material/mwc-tab-scroller":"0.14.0-canary.024f371a.0","@material/tab-bar":"=6.0.0-canary.69edc6e28.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"efde2be2f22a9a7e20f2b0d57c4cddee405ada0b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efde2be2f22a9a7e20f2b0d57c4cddee405ada0b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.024f371a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LR8jDvLGHXUoVVyTX5YpvwgFCeR1boniyiWT9bxTMrb9YxuN4ODV0RrrdmW7zZIRTERC496azbw4/PRAy/pTMQ==","shasum":"bc846287c8b55f67c73c62b2902ef885abe4283b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.024f371a.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXbL0CRA9TVsSAnZWagAAnYsP/Ajg/GD9l/QpwGfrM1AU\ndjM/WBTSMwxv4gPBeuplb/s47Ic6jjaKa7Lrn1taa7j13wqMEi6pt/cqozXz\nfxkwC20M7yO6N4Dwz1iiX40zZY+j1bZtxcfm0S4GBcAMFpT/pdJMsGGD7hMt\ngERRx6/RsbamJR9RUcfcFz/wGv/v1GJc7pnh5e3NQOqfirnUy8z9iSgqii2B\nKaWYmdgyiu3HkquC9dr1NcSw/H2R5vWspzgU/4BY/oMR3l9IqivclskwBFht\nmcFmd1HmhTmfAk9Jxirogb0usbZY6DNl6FnvsMzmyTnkN8F6vo0Q4DQ8n6pR\noFWXeUWtAct6QeUxZCzfRp0UD3umA6DN1xBmITQu3xqVPd82WvIJy6tP2dTI\njrTCrOyIcvsiyJj4aKy6nVLyNZlOFnaAwYTXMpOrf6HnklcsIuq3DLBicA7U\n5HAZBUFymPHNXkGtMLxJGyKGWSgubme1Oa6ogggpDOhqJJIij03oA/t38RaI\nAf2lPM7IL2m7hpudy3sbKVfjw1/85o9T7rQ+6psPhLZlWi78dd/9cwWu/30C\n8+JUZdJhgt+llfh4lth8ymNY674lPfR9MFS5UCKNBQQHFeKI5+J2VyjGIzx8\n+fsC0tnJQLAUW7BSE2wcVJlBsCfcqzFAKyy3oAeuhkokmySEq4FTGlAno6gU\nRZeg\r\n=I1qv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCQZsbFJydQfcR1S7QT+9mJ6CExDg4i8nB2tvvLa9bDAiEAj4LP567CjiabhGU+yfKnofQK/A2zAHh4dUL4Csim/kI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.024f371a.0_1583198963730_0.9269342745390328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2f164110.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.2f164110.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2f164110.0","@material/mwc-tab":"0.14.0-canary.2f164110.0","@material/mwc-tab-scroller":"0.14.0-canary.2f164110.0","@material/tab-bar":"=6.0.0-canary.9372e4939.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"288331a2ec51b59facb4791d01e4d2ba8f4b7cc0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/288331a2ec51b59facb4791d01e4d2ba8f4b7cc0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.2f164110.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Z1bH7tDjgO6JecxafMqxic1Z+QsNK6ad61qxAeo+cPOyvRsaSGhZPBaBuoN5MolkAbZAnaoGSvfqsmlW8QEaWA==","shasum":"cda6d927f72455521d32389a6673e3cbf5a50f7b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.2f164110.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXs1TCRA9TVsSAnZWagAAO74P/RgeeeUrDRujA8SoS9Zn\naXv1NuALSQoJWplYhCZ99+fiYFo1m7gsAgFtI/Vp+UsGM2xWBGNiPEaWvGEe\nwpOCMmxoSsyOOaxxaNj6pghrgVeHIWnB8qnKNa+IeG1khVXSOvnGQ4kEbKug\nidejd41hsFafrVgXZ9d75zvdnI2uQFfC5tSgKmiak4YHtYr1KN+u1ORpA/aC\nAmR/28JqJXirBfrnbmnRJwXDg1xRQexOk4Brvoesna6n7jtaZuhGXv0QynEV\nrBBTP3gFn8uM7J31szXrUrCtHjLvIazqa5tsrETzHmF5C16QL+PUk1N3ddSS\nWVk0UmiVw+UC1RCBEyDoxPLzzUk4Bse4JQE36QYAIGuav9CDwrYn0RizdWo7\ngcwityJk1gdKnzFEjSAg5TX7XqBjUrZkipY2WP+nd+Og7z7Lre/+WwCbV0Ok\nPm/hu6dyTBf6VqzGxnJPLluZEd4IokzwBlLoVp3bP2mlBe1NgWCbzBHzHcn9\nZdYmhmxjADGssguFlyqtLSf/J1X82Y8WvKkdvn0KRaW9Lqh+rKRAkjcUGbCi\nj3t2MLzkwNQmQyosy+zii/YW99ZQ5Wb+EzbEc+dSCba4AyyVl6mq1ktGcmQS\nLCv8rmK7N+TXSeFckziwMqOf3eXgSty0QppgE8ab5+5fX6RuQ1kW7kjUZC84\nCfao\r\n=ccyb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9ggBlRz5jKsiEh+eC0EIqvvWx/7lF1y6S3e3ilL6s5AIgCgCnPlcNrB3hPCQWluK3/341NZeirHEWURXoGw5R7T8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.2f164110.0_1583271250844_0.1590196305975251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.edd465cd.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.edd465cd.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.edd465cd.0","@material/mwc-tab":"0.14.0-canary.edd465cd.0","@material/mwc-tab-scroller":"0.14.0-canary.edd465cd.0","@material/tab-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3954ee24dd2fd1d9171cd7a967586e7d2b34ae38","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3954ee24dd2fd1d9171cd7a967586e7d2b34ae38/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.edd465cd.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-LXVNPD6IOBqEQI4K86CfZKRdEel1UjbgqStc7vp2R6QZlgR0CAv61Z8Y6CGBkp2ZUg1Ws8s0vl82SCTTAQ75Mg==","shasum":"250c497d92f50b33754b00faaf1222c69186a6cb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.edd465cd.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXvIcCRA9TVsSAnZWagAAqmgP/3twrwGAR4/FDBS2j7XE\nQLkuQTRU21ekFdQ2TXWUF5Xp9cZZ/A/X8JlP21O0wUXT6O/ipr40EvsUrkdF\njBIj152HodQPJAVvo5CRp8BCj7gtgWYLNdDHhdN1TG7BdJ/lVHUPkzTd6u2X\n1nQLIaYI2XMTaOwLatrLQeBH+C6lBlMhGR1hMmxdApbGfT+uPJs8Bumy143A\noCZLOnKuQdiSNCxLAMYOT/UcR2Fih3MW/UjJSNB2mntENL6d9/1ZIhXojTGD\ns1teH1S494B/yP4fMrwa4xmLW7jsYbVFD4A80H50zvxXl0ZcYmSJJrIg0piS\ng1Z5pj5rNtOs5JHhLFhhDutLRaGwk1OQwu6UdOgd2OgayJb1oAxXiPDpq4i5\noDleiaU+Jp7a/moApghq6txXx1KTmdYgzcCiHKz6jgrU6eLMUGeOVemF7Kz9\nP4SHsWPk4dpbNccUBAS/o3Lfd+tIRN5nuPCb38qARuMcgFnYliz1DtOwic23\n0oHeMWShHO/vca60oQVbQNwNDCphuRm84V42Gwe4o01IRqs6/Q8nsM2J9SKI\nwfIvxBMuBDCmoOjflOhy5keqRQKIqZuqqmreaArkeZ8aH/YrcL1RPzxFQ6Sd\nT/dm8bBBKQpTEgBovlqenV0nSrH5HrCNHmD37IzKq6YIuur328HSjL32km3z\neYfG\r\n=XE4l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCty4XxHuh0ymrYtRudkspL7PCvrCy0+WtO6Zi4mEyPjAIhAKq5lLGKjjNVTtHPNHxE/GEJpBQAMkMciHEp+zlyaFiR"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.edd465cd.0_1583280668145_0.9185879376320756"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.2b02d017.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.2b02d017.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.2b02d017.0","@material/mwc-tab":"0.14.0-canary.2b02d017.0","@material/mwc-tab-scroller":"0.14.0-canary.2b02d017.0","@material/tab-bar":"=6.0.0-canary.9cf5e9842.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2f2999d0bc0326feb2bf856866fd9238c59ca246","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f2999d0bc0326feb2bf856866fd9238c59ca246/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.2b02d017.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-db45AbnTMDgJi8dalpyY+dHiWX76jxQ8COiNV/YTodPgfpnyYFep68UwZ0V/gWJH+bGbhSlyhFLleDAMeOzPcw==","shasum":"dd285c31e1185aa7a2be60ee8e9b276d1a6c97d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.2b02d017.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYA1ZCRA9TVsSAnZWagAA2OgQAKUKf5WwooWKXDr3VIe1\n6TXE4heYLgYg4nFJ3HigrRk+07rUK7fqGzMtYsOxOvRzzDBTBMpJOKAehSPg\n5gpUEm4asYSOVk0c4DgUwjCW3G4h7bQbiS+uxZVDZdyJoaw+BGjtmDdv47FG\n7IhOLbkgTKMpnjK7b0jBkFVc67QVPk/ShMA5IBubafcVuRis8ROY1iTAibKH\nDytybvqHPYmjzVtX8YStcRXodrEEc2fdA0lSbGbju5ppu1BMXiHli5Yyhaux\n2uPPjxIPwZZnSNGr55yNpAPP26snvoAcDflvI76xlYdXhn9SCjv7o7++NJMT\nQhnR0Ld7j/I0UYVAoFgdiV97U/vOjIAbipbmqAsOIIqJX1KOJZBd5gwTmsPI\nNpNGK/ZlDU0mdQeNY8obkYbaDWWUsTccea+1nfydq66ApJm9ven7WpJ1iBli\n8So7r6w8V3z1qxg7o2g/GlN6de0jDwLBWcUyUHYG0ljKnTPWax9YJ6H+hZ3t\npW2C0OMIJOvrAAX0dI2+KS9N4O3zs1xX91zU1JlTjc2x+3lo96Pr98nlojiZ\nrKlDG8mcUOz9WLr49AMV7AlEjtCjI8iOOnjrsLz0bfQAZnFSt1oKHtT3Zydk\nCrFnZs/SByCXEvmG9m2fHhIzLlDpNf4FKElBemkOe0JmeueI1iWNISiSzwjz\nltPu\r\n=/mgs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0ihiWsV+mId9qLwwoXIbm2xDuuE47mNp5b+3HxZYadgIgeNa8eDX5Tc2O8/oNeQ/WC0+pEvHU4WhSZK4t1h/FWxM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.2b02d017.0_1583353176924_0.413935622257283"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.cbdfe453.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.cbdfe453.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.cbdfe453.0","@material/mwc-tab":"0.14.0-canary.cbdfe453.0","@material/mwc-tab-scroller":"0.14.0-canary.cbdfe453.0","@material/tab-bar":"=6.0.0-canary.3657f8863.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"473c76376428d49a6811e677bf7e1450ef90b5cb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/473c76376428d49a6811e677bf7e1450ef90b5cb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.cbdfe453.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UkIxR5Ex4qPRimb7RUXFUKJTg9lP+zAeM8TrJ9atfq/KmIA9jCcsHEF3HLRCBFXXh4Xzupp10/K35jJ48XpM2A==","shasum":"92d5877d3f045ca360672c9f67025f5fb35cfd3b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.cbdfe453.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYCFdCRA9TVsSAnZWagAApYYP/iiFI/HsB3uj5dQr2D1u\nneZCac/4/lauly9CaNv10bGTMJt43DDfyAp7jMgrbj00rck14O3ItXme9dwl\nCuiiNMv0qSCvJ8G7SSiyJBrMLUN/5fnbvAwuqjmSw4e190QnNohTOlL9QJVQ\nfVK1yhuvQ/LdaX7JNbiJWjdzgSbp7nS861q0+msjuprXHqTsq57VPNwGuA9e\nUJFixiwGOwHO8JQUGxvCWVbw6+Pr7BJ/596QsfcRvqTJAbyORCGCDcftI6V4\nxTsQTrSvVn0pY4OiIHjtpuSL1+wfYBbtLAe+GDI88MuLWdJvkSGuD62HmWXD\nr03kSJRbZfYjN/dU6/pHVULbPZ7xQmGemUxflG1LpXClgL3ss9RhYcVaxeZ3\n/dEVm/eh+3V1Ouz2kf2VCZiMrE9BRAs6CMvQPvJOEYG7Yg0H+jeLvQTC5mTg\nL1MgjQMvyTrmpyZTllukYZUVw03PijfQADB18nJckmVVLz6y13lTfwjld6Ys\nEkFMDIh+xFAXIYrB72AcJJJ9YFL31x8taQVDHXwYstILbQSDRT7iE8HTpw4K\nkBWY0oeZ+Cgqppy1NnOdyj7LSkKGX9HewhX+30SNWKoS4dWIfv1/MeB+ZFoV\nImeaT+xDcNgISQfR870+1HdQpD+v/53MD7w5chwBM9uaItszpQS1aPHpVKLQ\n25pP\r\n=Xkd/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlIzK5x9dgxM4+lgzR8Yrr4x/TcEAI87MudTYI+R1VWAiAoZshVvJ/2Wy3rFDlBdBG88D38VHhsiN0N2I4juySTCQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.cbdfe453.0_1583358301042_0.5138539569481684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.02aa8a98.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.02aa8a98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.02aa8a98.0","@material/mwc-tab":"0.14.0-canary.02aa8a98.0","@material/mwc-tab-scroller":"0.14.0-canary.02aa8a98.0","@material/tab-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"97bedf50cad33662f192490eaffe0e04894aa3c1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97bedf50cad33662f192490eaffe0e04894aa3c1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.02aa8a98.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-nGQR3ov5q2uqapPwLCnjCxZQ06YE/h9aBuxOfsjgelTTYSOnztrM8fQEIff+Bb/kKTPGCMTKF8CWnJOdXf9wvA==","shasum":"8f508fe95f0bee379b1f96df5989651cf49467b0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.02aa8a98.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYtR9CRA9TVsSAnZWagAAYjgP/2sAGCin1nkskCGf1DOs\nXwoH8wyaXCM3OZ5PsRk7cw3Wpb2/ZNiB+rR6/SvcR3CFkGoOlZlf6W7h6MkM\nFNdPAM5OEprv26Uf6ws5P7xxKtmEYeqZ56WfnkJYAQx1pQZVGflGw8TBT1gn\nJ6rLiVzArlDO7MlRGpO2/25iulEG5V1EkBFel0v5UBGmKBWk2gKmZHx03vk1\nIkIQ2EeYdJwCsU+E10zOFISISxSJJml5n24eQdFWiCHZZEj8Z4OuO9wcaN9r\ne0uD5V0AHdROYOp3TguEtIeBdMYeaK73z9PS4EMadcgqiUNXTmdRn//3KQwN\n/F+nbNf8n2Q3BhzhwHzyZ/oxqEtu1qxkg0yK+05K9cnybkf4NdbqE3oJkBfK\nakKQpN4VdCqll0a9IkXzFrf9YvvEuQ8IhsC9/JpcOR4cvjAVm/WY8mYj7ey/\nMNn/k+uGX9JbXdoRGpE5GIg5I2tjji09IFwXU5yC3gvTXlrP5kjf0hBpOpmR\nL+RNZJsYw0EmRj3ihUBEk3zLZJVaN5xlQ+0BiZ0cMo9GwGhDhwVURcOQIhYx\nItmo6C6KjpMw67gihsmlYjDwqYaH0rbSi4OIh1PbesLXam2xvegyaF2EcvpB\nT4pvEysTXtYfmjNUNcgv//mqF9aS/jnsQ3HQjwn33XOfdlWowsl23DRCinRL\nSx2V\r\n=LLeh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICQ/F+ScU3Vg9BBotzfZu6KWjjyjMb7SjpVaAN//Y+onAiEAoJlBtZQq5jk63wbkkJ+Enj1898baEsln0xa2W9h3ebs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.02aa8a98.0_1583535229253_0.972894589150175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.7cd5aad6.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.7cd5aad6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.7cd5aad6.0","@material/mwc-tab":"0.14.0-canary.7cd5aad6.0","@material/mwc-tab-scroller":"0.14.0-canary.7cd5aad6.0","@material/tab-bar":"=6.0.0-canary.17b9699c4.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"02d47be94c90a6674486253c11ed001b63502d73","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02d47be94c90a6674486253c11ed001b63502d73/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.7cd5aad6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-O6aV7nCntXLpxYzH5auzDdZ2dZQ9R43bQt4Q/lW03IkMtdj3nlpCNgYn5hFe1CjtmrWjd7orfcb3Gl0qx05A6w==","shasum":"aec043fb744be214265626a6aef7a164690272d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.7cd5aad6.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZs9GCRA9TVsSAnZWagAAiZsP/2woFsYGpsAjBfEFfwcv\nN23Vx0VSVukK/VtcCXGHX3rPdYs9ZX3QKHJb2Vs30nHOkMjnc834jKN98+Cm\nr3kTSbijkEpghLJzPBnz7P/u9nRDF5jh6flZaxQeOPvr+Wbfra6MJMpCVwof\nZiL9Ll9DVrJamJkdxNOB0N0gUtoTpQa9nEDNhthlcKLVqygdTltmppWLsoro\nYe3M6+cJqAjUom4bzqx6h1vy07aj3IijJxNMrIFD93aEn08LQ1oiYg195aJX\nelJyPjxckW7bAw9SAMLSSvnCGL8CODaCxMMqQnjnLS9RwS27J+10c5k8+B9v\nrEDSv7iYi1ugYPeMGlgTVTz+EdDQrLnyBqonJfOiW4Jy+tltW9oKa5pXorVs\nqSl/a+GpMLN2/KpVkz5iv22fsDOA/M/1xdq119ChfzTKy6YGZ7ewHHsWEoAo\nqAI46lQ5WnAi5E+qA5pQwDUFrUOA79WjhkMwD9ogMA+Mu58OjbyvscqZ1AOp\nt5GR1bAMyh7v7jGTvFozQK8Km6Sxa8G5YbXyZTQNfY+wu+IAUMZbSPvlKZco\ngvG8bFpcoZxF50GGokceSB/Cb/jzQHj2452rRvngejqBJI9L/lZMoay97PCZ\neT2lgVI/WEDnunjgKDACiY9d+QqIE0P3bDRzsDKvMYZfW/cezDxFlG40v+Ui\nF2bz\r\n=jFf+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRQDMWNHm/M2sK5Lxus3akc8myCiZ5dP6AR7Ay5apIkAiAyqhedLG45t+6LHrVtNzEUB1RcwiJqwMZYd80e14J8QA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.7cd5aad6.0_1583796038464_0.3507759950244187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.3a79dfa6.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.3a79dfa6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.3a79dfa6.0","@material/mwc-tab":"0.14.0-canary.3a79dfa6.0","@material/mwc-tab-scroller":"0.14.0-canary.3a79dfa6.0","@material/tab-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d8c4d68989d9c1489104002dc0f43cfb89ad0488","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d8c4d68989d9c1489104002dc0f43cfb89ad0488/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.3a79dfa6.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-7eNLvAVjgvVBu33XCvVtBEJ6n0vsTQ4oLjJlZ0RYrSulpTjrR9R5XRPJ56af1XDfGsygpA7EYdP4CltJzGT30A==","shasum":"88d1a536d3a31f5af03b1b9f51d9535b2fef3f93","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.3a79dfa6.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwHpCRA9TVsSAnZWagAADscP/j1z8DX2jgJIJ2kQ0DqQ\nCWD4Fzf5PqPIOUI/g/S5rNzcqd0yncBcMd+PXtdTWpgmIsCldloIqgL3Ufan\nXp/xNk8iAVzpR6zu3Kabv+mMOrByygmzKsOQh8U+jOwBf/2OsQhU55l+VXFk\nQnRSxby3js6b29XkVup3j/I3MwW4EbKCzXGkA8ybAdATTkhdsWNV4sSGNBZl\naNrRJBe8g1XYciVADoRifExlHRXZyifRxVqNyp3EWjq4wegYEVO3zdlqvqS/\nY3/EkfYWnoPer9qTW0Fv7gb4zhOqobMVC87Uc9cBS6yeYJx/pmKCvDhmYJxW\nRornlQ80wXJ04CfcROIupFd6Xe7g+dMhqrvnjUTRNdbbQBuRPFag5Hv+nso3\nZ+oEDBcvARbDxzPF673Xz4qrFNng9Hlu/aulXIahX2For7Tg+ahwijOnesF9\nPnW4V10F/gly3rPxocbAS0fZBSo4NnGdF04N6+OLblQQ2z+FRH2A/LwUMNQR\n7MwU8mFvZA/IGAV8Wr3GF0BX7TxRRalzRewtMNSJOVl/YEZG6Mg6JcbgOr9H\noI4+m1RxlmljIkhAvJzy/d8g5sYKJ1GAxPlWV/zejS9cPWsnMcQdp29Dqpo/\n8APIS2w+h88AwwXsQq2IFFMp/2m27DbxZZhGSR2sD8QFyr7lQadPNzWLZvzW\nsGi5\r\n=4I+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBzfmpXVS9rzCmCwB7pxnIRMW/DPQJoPG3betiIZPBKFAiBCDPJA5nBpqTglilWYpB4UHKrwyaEk59BOeHxxP4hr+g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.3a79dfa6.0_1583809000522_0.0218056377576632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.22e0f5c9.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.22e0f5c9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.22e0f5c9.0","@material/mwc-tab":"0.14.0-canary.22e0f5c9.0","@material/mwc-tab-scroller":"0.14.0-canary.22e0f5c9.0","@material/tab-bar":"=6.0.0-canary.bd33cb56b.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ccb096ae11e367b4590851e53c023abbb22d2774","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ccb096ae11e367b4590851e53c023abbb22d2774/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.22e0f5c9.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-BxbA6jH0cLh1gnQ8KfiuFvXlOwF8Jsq5X0DMgtZp++wJPURIE0pgE/Q47gw65iYCsHKTSxqyyYgiZbORUDhwSg==","shasum":"b9074fa4a8c8a079476c5639af5070eeea31b60a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.22e0f5c9.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZwLaCRA9TVsSAnZWagAA+0sP/2Or8CgX5Eia5H7UzuMN\n+VFrekUzSiufuKZUoraaTFzJ09ObwsoWoeBrjQ5UXNpFWyoc2cJxKtPvc5rX\n8GRXMQaG9UPtSJcSiitKVZIwkPZ8Ie3zhjPqvRiC0QLrX1BF6xMJMPbdE/rI\nRweNc9weYEitvdGuU06veHQE2i/LE3tWp63y5GTRjAfWuvlluPb8AQtzC8tP\n994XAvE5H9UVu2RfnPn/sxeplzX8+lNUSM2v6sqsi6LhUdUsiOHJaCCmQidD\nFknyZCX76pnbNke7agBTifPvWoG4xhz+NFB9aoe6meAnICy0oHNEdA2pY8aY\nLLUw4e3a0fL74ceMqsx92pJ6TOt90WjAdCNCpp3oi1hex7tVO3N7uPM3ur41\nCn544Y/7A6K+as17rPdyhL3Q+heUes0okhMIdeeGlxld4XJer7bKSyQqjmwM\nt9eDmZ5chD0SsDRk1QRVFqtO6/nouwxtggu+9K6OWM2NUSo1wTbzLo34Ivqs\n35ZFhxA3u37rOM5J4Ful1clObCCt9pGArlpLjojxY/oDnTxSNR5aHd+7EZfe\n2QLn5UpZQVWdZR3Jbe0qRSUhs8H+Drh3QacNhBS5gBqEPpVGza4abG8O4ogZ\nBd5mkNLrbAgSu1LF2al++lsCvCVcCqAS78pc82Ynda9t8HdfHRSY1+3erE7E\nYv7X\r\n=sRew\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID5GY1zxDlDaCT1tE3vkF9nK+X3X408RMX4zY5xWy2yDAiEAtjO1CKisJuQSRbLS+4hpUXFd+SdUL6ygxdg66t18BYY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.22e0f5c9.0_1583809242072_0.8240973586374774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f23a1d1b.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.f23a1d1b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f23a1d1b.0","@material/mwc-tab":"0.14.0-canary.f23a1d1b.0","@material/mwc-tab-scroller":"0.14.0-canary.f23a1d1b.0","@material/tab-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"625010e9abdb8adc901198fa1ebdc99269b946c4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/625010e9abdb8adc901198fa1ebdc99269b946c4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.f23a1d1b.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Y7OIq7TffuWKSbPiYXKhJNZOL9PraEARr2FofG11NvMAR5YdKJAOGekM4c2Xxtfa3LjtIREhKzbde/j1alZluA==","shasum":"c5dfce5e84b66704b59ebcb891827580d7f75a02","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.f23a1d1b.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/8aCRA9TVsSAnZWagAAPAMP/0Pmzo1rrEv0uTAqA4PT\nzv8mq9m6Uh/c/yf717wAjZ8izPw15jDrkzIc4MJr0LRHsSA/6Uz7XnmzS9Eg\nLpFOHWPgngOyWvlp82EP6onSEQUEM69QJqLwwoxN+pQXxSDMgOw6pMx/kOE9\nWgomHu+4RhmJGrnHBknzrjBcBonnOdXvLk2/6E9Df2hCMGnmpjHhA7k0mrhh\ntZ7Ew2rramqE0cYzzivc0+0n6guPcHNKKgLKAj4u2ghhU3SGmwBRJBBD1OBK\nC7SE5aLwqiUBXdkQMby1WPN0BEbloVqone9010fT/AsYRjLSQ9jtI/CDOLrz\nNuo1qQ9nXIf8Xn0pO86E6QCZY/CxxG1Zr4k/4Zs3lDzPILMdUsNwXiDcRcs7\nYn5+begroWyhM+PlJDB2mGAVl3f0VeyKWriNi15mH00/34WABzfkwQw7q+uP\nODVzz59ZsVcCZBWLuIBJLVqReOligm9dCiwatxrkvuhiZKmR9hVAgCH/5W/C\nrOVjXb3/I722QuwprjwHlKwFodr/vsmae8jGfALNMG/BCQreL8KoWae0IDPu\nJaNAHcNv3uTz7Qq/HCDZwZdxY/vdDMkHQRlvh72ke+IlwF2BlBJcawaISRqv\n3QTHa7+pTFaAtfFHEEK+i6I3qREx5bWi2ceoU2JVTmqY1N9wX5eOWJkc5PG8\nCgBW\r\n=vRXu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1F7Ci0s3qvUbjwpBfqtOsp1OUVu1oJkQ2IvJ/kRznRQIhAKcUjF5PpFDUsJzSf844i0/dHujM/P6PgAtFdmoW7GI0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.f23a1d1b.0_1583873817905_0.3670969329448981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.34b2d69a.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.34b2d69a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.34b2d69a.0","@material/mwc-tab":"0.14.0-canary.34b2d69a.0","@material/mwc-tab-scroller":"0.14.0-canary.34b2d69a.0","@material/tab-bar":"=6.0.0-canary.26c049afa.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b40bf9e324ad010a2ec93cf8677b25b843ad9c46","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b40bf9e324ad010a2ec93cf8677b25b843ad9c46/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.34b2d69a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-FxBfwqX2+/pLIojjxa95BnTKAm5kQXW3YkTJ9yHpa3NDnHsXiwFkn52z9SwE1OmHwPfNzeXg+u8RGDDHhKudBA==","shasum":"99f3ce1f35c7d3f5584ad7d0d06818dafbc0c9c3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.34b2d69a.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaANgCRA9TVsSAnZWagAAJ5oP/RwBhporTqzOXeLos0u8\n/ns2OXsklzuv5SQ3G58SOg8I9GtA9YItusSZiU14zZ586+gEwreT8WG/LBOW\nqCgl+whQsUFUN6TCgQNFGEo+EMTSST4DZAK6Pdx8bcsx7AtT4Kzm+WKEiDBH\nyMKv/e03sjenn9l2fMN31+octfywdK9uEfKbpUaW/dCpzS8DM1aHkOF/5YkD\nvTvT0XRQfgGfXLp9RtsARhEJPN2vDiKAC38aXboY5sVmyu3KeOYLMMkCtFhK\nUTlUB6flnqzJckOPW1FCj1Ikwf19/1W+XWK/nCKEwZ1v4R22KK1WQtJ8JS7E\n7FkE1/OFYObTSgjSW7k/GutZzRcwVkCfti4E693kTTsz9mYVuZ0IdjKJ1XvY\no+PHSCbpVyFek722Yy3HdaoJPmMS8AyaHlI3UIdT74fxGbMse2FBDbELUSmD\ndp5Hml5I/hwmR2mdpCTjyaz7z1/aCoIWe6/ctobFprXw6i75zY5XNf5t/pKn\nEHFW/2v66JDXuRKJaAtp8UXVWWLE2CgJnrxTRobg1HPiKhgyWB1IIw+g/cyH\n0s4R4HTR4rNGbbQ4dmRTmaYLAz1F0OttlxYDnbav0WWv/K63tKnDgiqe0Z+i\nidjp77Xcz7sV9RhwhuzZN5a4QJItzkN0aonrGEyE597s4mdxAi7541RpOwmk\nwY1I\r\n=vXLI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8Zb0l3jl5nllsA0f+y4eJN+eSI9xZTEE657faVo/zmAiEA8yKGlZLns5jV1lrcBmAJdabjYLfY5oUQ5ZUvfFN6b78="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.34b2d69a.0_1583874912054_0.2091091420503115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.dc04abe1.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.dc04abe1.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.dc04abe1.0","@material/mwc-tab":"0.14.0-canary.dc04abe1.0","@material/mwc-tab-scroller":"0.14.0-canary.dc04abe1.0","@material/tab-bar":"=6.0.0-canary.1db5c9fc8.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"83603c5af2141bb893dc17dc4ff73baa5dbc7b64","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83603c5af2141bb893dc17dc4ff73baa5dbc7b64/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.dc04abe1.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-cyA8D9cf5rLf2p19mHsEjTZiG9tOBWodqRz11oAJhIzLtUqXJF0ymSju3mXlsYCgWqG3QSIx8oQNf4/nWp0zuw==","shasum":"c4aaf6c3db7f91be2261594ce852f4a299a9179c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.dc04abe1.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaA6GCRA9TVsSAnZWagAAXb4QAKTbgHLSVc1nxNvM+Wuf\nFBhZQCRtMgiv/m+KJlXglbh3t6RIY2q/aKY7anaYzu8yS4F0WfjM4FXAssLQ\ntGwzsyeUHIx9PQLunoOp09zuKDQaSx7hFJA49S4MP9eOzmvvOTFo49j4iDcE\nJqhvdh0F0wRmKZL2odoEh/GyQeqPZheeJH+MzYxn4OVC26AxP3J24LzROAYU\nTY030r8/gvR6pxtEeRQdDyQIpsVIlgA8ykpgKFoWFoHWU7Q6Cgw99JZT6pwN\nLQEmD3H7da+XrBdC8Uwdn9rtQ3QIaxc61c7MBVJBF89mBHfnrd8wYpukImXZ\nWi83nyGeofhzNvb1zT7H6FVdP3095S6UZMjkGhfpTjY+uutZivWAFdjehozF\n1yOPSzdIjHiYgle/qAp1ZljGuXtUmgOiSQ22clE+cSmfcuvYxHQWAGdALeED\ni3P8zNHrsu5CHCM1xbGfYrmW1MrWxHNL4KKDfbxOr99f0OjEIADWGNqBK861\nDjZjikLky2I+5KhdA0LLZHKfJvdffmmfgeh9Moji8NcEkMNZ26KDn/tvzpMH\ngMmGgHscH8P8ytMOFYgUO5QQu9Has1Kd+yKfplkcG99auPN3Z8tIVjQQolyD\n0YyI1943r+7hBQtp/RQjcgGLEh9QmX6jIOtgKT2xoTS7KivplQmud1MjDL+M\nNYGi\r\n=FYqy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ46HtAybaugH9hcEKZyn9CjTmEtJNRcQ8g13ZGlb+IAiAuIh/CdQG3I98+wf0FiC8xrcyk5k7+urTCe7DpdqRs0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.dc04abe1.0_1583877765707_0.5776231758792096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.04ccbc88.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.04ccbc88.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.04ccbc88.0","@material/mwc-tab":"0.14.0-canary.04ccbc88.0","@material/mwc-tab-scroller":"0.14.0-canary.04ccbc88.0","@material/tab-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfcaa800a510585165a925b6961a7e6316f30f57","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfcaa800a510585165a925b6961a7e6316f30f57/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.04ccbc88.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-exKdYOobnumxUPWUS1NfV2vmV+RG5aWKxHZhoTAvd+xgtUxyCdpkVttlmnotmOF87H23r0Kd5UBjX/giOIzmyQ==","shasum":"1275ceee4e42c41b75767225c7729c6b87d71192","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.04ccbc88.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaDJFCRA9TVsSAnZWagAA1d8P/jV1FMFCrYOVnBV6BEpq\nVV/BNbr1zkHrC62byV+JqIqpHTQ/Jlx9JTI6w6Rde9BZXOJLecYyrnJCXVYZ\ns/3M0mew0TXR/4oATGBJ9Ujm+Kt4PFQYoTpCFR1RjYL7DdDtKUqGQvr15xQk\nj+6dIpvmGDU1S1E5BRrXyZ/km69kWGjOP/RbBndxliT8EVio6wnnxL7tpkBM\nH692dtnTn65NFiHd/CEnMz1Iw8LB5jLDLXZ6/NrRTiaMMyrGz3TpZt5SSg2K\nlPpnXkJ0J/saD0FHKgmlWtI5OYxFH8/MpEvnqp3N84RdnC6crT95cdHCBcI5\nAVsTXcAJxDva2OedYtFaKPKEFCoSUqtwiQwW5GCFavTQ6zVrphIRrUhweuqu\nsE4+SsuuUuNrxOGlFvaCDvzArE7UxBiWa+wh/ijUbYdJHBCfVZ7OfrNQz1eH\nFhId2cSjZqC95ZF01nZw4X/KH0aouCE+AiLiN3k9Tq3+LSXX1xIMArFLptHt\nIXpJu1YtT/C312/NVxN15Ssd1mPAyfICrtEebB6kgb/A0B67WuG5oZ8Tp/Jb\nY31UVZzXhd3pQ6svClwuhUj291+fjMETulGUDfFUZVyEEvIWfqu2dUAoul7Q\narx5vZFssSx4Hwl66zqfIoutreBBFY7T3ReI/v3zOFc8GiwdyeCXbplWc9Yt\nXxpu\r\n=XSJB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHvBaPlBOZO6csZrqN3kunnSOG7dIkqDgrHz2AIMekcSAiEAykU45+38X8D24WXj7TiU4jhilDtdHx20ThEhYbTlD28="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.04ccbc88.0_1583886916966_0.5148382837006498"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.55338c25.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.55338c25.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.55338c25.0","@material/mwc-tab":"0.14.0-canary.55338c25.0","@material/mwc-tab-scroller":"0.14.0-canary.55338c25.0","@material/tab-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6251bd82d8c2b37985e6a165d6904180ec7a96e3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6251bd82d8c2b37985e6a165d6904180ec7a96e3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.55338c25.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-oJ+tkMhpMp5aaQw8fipR28UoEUzzk1B5nkt/I9Wg7Ju60nBSUgeedhIIrVLYbBN75TIWdIR+phGyjwGRlT4qOg==","shasum":"ccf9d5534d09c83ab53c5dde88418dd326bbfbe7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.55338c25.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIXaCRA9TVsSAnZWagAAHOsP/R69FIR9VzBEDRldLDrs\ngpD2Ikbf2BpGxzlRoP+7PiDvT/8GCgSLb24bZIKX0OYmgZW/qInrA05T+qIN\n3hx6FRufamwec1HTO/qGpCWt+kg2Qlb/Q/yT5up5LNVrr3Ryol/KAlY8uFzt\nAawpW7DSVROJ4/uV9Vs0LRfUpa9SMCJVxSM5lUtSn8qi9hOMu96/5a0Du7Kj\nvdgrtNMD8z2hdUOzORv7zWV1TzVbey6il6SrfiW9Wa52BXSvXJxEUJzB1/el\n2Ccp8vWsK93/vZUmx6m3AiysPnW/TFP2Qm0V+i0G3coPNjCBx+0GyBKQR+Fi\nKrPTTIrjHEOrz5Vynd4nGGKrDVOEOQA2joCYSm63acEySB3ofEfS2g0H7xzY\nKvvy5DNlMtPTZyDCRGxN+Nec1vRIcc95jKW26aWBDVlgPepshliOsB8O5/gE\nIwGtuQO1ocNreLNbjPrG7jmQhMuiTX2BjVE6Kuv3ejIAZIDZRdLDN1fFH3wP\neRS0P3OW2kT3q5lNt5NF12PuWSr/xEufMziUZesDaZKPij5JT2Jyf8WuFyyD\nZfhzDgGdlYHEScCks5cIYjuoa6C+0FiB4zW3L226fZIUnF1+M7aubhtNP7uC\nZH4YUwEhoRmQZ2xN8PLtrAEA00iBiz2TKT+I1aT2Hr79j/L53uP0j+NvcY2t\nlGBx\r\n=HWKV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDa3RPTTJA0TWkeHYu0TzmUpnsP6EuAE6fusGn4cpuB4QIgK4MEdzECO+YeLW8YxiTX+idTFcni4Xlow4ekuFac2bg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.55338c25.0_1583908313810_0.2491763069488424"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b7e388f3.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.b7e388f3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b7e388f3.0","@material/mwc-tab":"0.14.0-canary.b7e388f3.0","@material/mwc-tab-scroller":"0.14.0-canary.b7e388f3.0","@material/tab-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1ce172712209d5abf28a65e797f46fdddb7ea704","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1ce172712209d5abf28a65e797f46fdddb7ea704/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.b7e388f3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-F2kVQsXWGZIvTO2qwHPDqnBhk/UEgrJlNSeKXrf41LqzSHRQjljcM6yYOlAG1dN4aKU9qzOYnm74IODLH03kDQ==","shasum":"dd4716396e125631db8b94467500610868191523","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.b7e388f3.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUf4CRA9TVsSAnZWagAAsPgP/08gMhBWXnjaqvwoaobw\nkoRhJ1XSYRHPrLXJl4C+U5WWGbsxu2LMR4IY/a98nduR+yLx4okrCQsukOaa\nI6DT20+y+0STsCiwgjTocKeISkDoSuIUbAau9DBbYiBNR2YTHXWASy+xyI1T\nW0M2XA4RosWra1/4eIN4DFVo/vRxnOH0gts7BGznsL5nIhkxV7a6m8gqWoqz\nlfaKvHAN9ryKLpqhA2rfmld/Zcq4YqpwUaWSscgZ95a3rHAs1BbiQMTTrYco\nYogvTLrq4di0Bg8P+yun+Uy0OZV3LLhDjzM/C9131khjOjGEh9w43FHmhuPs\nC/ujc3eX5QzA+0Rwn/FlhJpOi4ufJCimYpV5gdUNBkUkTj2xCTEyHGzsEgCs\n+38slE6QM2b5UvBtnmhvWqUIdhx2hoJ3St9FsZ8BXBSzcFVr3cgpahOtg51M\n+5CFiKHYXuUWFfUinxg6gJmSJyK145y2KagASVNfXV/I+dJDSJeFAtzgzon+\n3UprSuzX2D8b738dehT9RYmMjl5bzeL3fcb76W9McR/KAtoyV8oNrZEDiEDk\nSnKF9OZP28VfG5ZLRweKtVAKI4Y8eE08pfX4MemPTCIx3ASDGSFtQO6V69MA\n8l5ddzqIdc7W1yvllRjFlq91Wum+dcaZmGIFx4HB5LBpkKxnFzUQ2X/ts8Kw\nfM9C\r\n=9z7J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCYUEtL4k76/L1noBjHjqbU9kP1oFB78bnpa83Mb+n75wIhAPp9ChjLSxrnIugqwl8V8nwVXkHfat/lKEQr/ik4YdpK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.b7e388f3.0_1583958008095_0.5817162406637599"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b3211481.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.b3211481.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b3211481.0","@material/mwc-tab":"0.14.0-canary.b3211481.0","@material/mwc-tab-scroller":"0.14.0-canary.b3211481.0","@material/tab-bar":"=6.0.0-canary.1ae8130ce.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b6c73b4ab63cb7701379685a556ece3324d1c22","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b6c73b4ab63cb7701379685a556ece3324d1c22/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.b3211481.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-ZPwlI4lcVn2HN6rBlCbVa8R8NIZmNiuQ2yhVOnqReL94vSPqTRbi0B/8OOtzutENy1AaO3F29aFqRAceifrxKQ==","shasum":"0ad8e87a002da58329530b43829efc7913097704","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.b3211481.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaUj2CRA9TVsSAnZWagAABoQP/07JzPcI0gLeq2cklrTj\ns2aR6kQT1bOaRgiV9Tom8yvu/SzE8nbDwFQjgVEdhhpDhxhD9wmXBjH9//pj\ntKDU7MbAIFB19SORQVbBhSAshSPjJY7lDyN8YW/nZqFsP0m51CFurHEJcx4h\nptCJuer0qkZF1ETZ9oN1dbofW6iXz1wJxLjw4DahiGusiOtn8syOPY4Jeljj\nJ4jpovvI6iugzLRp9HaEvDXwRVtzU6dj6uotRd8kVRizNmH6K1A7WWlit72B\nWqImRh3UCdOtfVtHMmcS700AqjBWXzypLgQ0mD45/X5NiLcuTYwk1b8l/wSE\nKy7FbuN3Q/+wBdXpS3JNcUAd5WRThfkak/0uH2NhFtXX0edp9uciOcu8qPws\nKMmWNoVt7zizxmZpsnj+HUJrjKNSQgzj+Ub1iR4plh8SX1yZD176kJ4Pzr8b\nz0zoX4df0vwL7FzH3aXxhKR/cSJl76o23uS9cyihvvJhjw6RIAJWTGR8qvCh\nH3vEST8ao0JuuI/FtV9Jvd8F3reH+4AtUsJvfQea1CDnLA1dBD+wCjMHSina\nWq+Y6lHp3FVrPI+ugkpJHVlEThNl9QsMKqTMCSVd8SNMRtIi41qj1jTNtb86\n+NQ/NMtOHXj2qG4KBa0RS+/CPk2KNbnQWAPLrSWjm0zcdp5uXwCrZiuorz4N\nudUP\r\n=2Ljc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmaxjgD9DWkRPA1eRROus0nxxd9H6pwbwh6OjFLvDfIwIgVfZsUK3jqtFspauNSkidtrY/5crsVxgKkiDWmpfrHxE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.b3211481.0_1583958261679_0.12456717173401133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.0b5c7f23.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.0b5c7f23.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.0b5c7f23.0","@material/mwc-tab":"0.14.0-canary.0b5c7f23.0","@material/mwc-tab-scroller":"0.14.0-canary.0b5c7f23.0","@material/tab-bar":"=6.0.0-canary.d5808057f.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c142ca8fe1db14da6fd164a99ca71277489f9b16","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c142ca8fe1db14da6fd164a99ca71277489f9b16/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.0b5c7f23.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-iFnwLIZVtM36Sx5Le6aCq8nrr8futMEm8yX6FwuKkSIpGvrskW8hBg+0s0/QiDHttHXLsZlHPFfZhRDrWASAOQ==","shasum":"1723b92a7b1e33b38d3acf1e201aac4b35543439","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.0b5c7f23.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaV4HCRA9TVsSAnZWagAAMGMP/irhUoPZLMgpxxt6ec6c\nrZSjwUYIqhb7ULTWPYypdCEIooXiUeCfYGZ6Ok+BPMYEsWE9u7x3xvj4cME0\nMco+9ZsuOa2gOWCznK+aAU9ZmUxMsf2VOjRVkKxjj9B+VPsqqWqngWo4NHOO\neShgpPqR8I5BDD0/zyPoi7hQmNHpuHHHO32AezWEz3MQ063ZRgS/NFa59M9X\nYU9y7wOwdR/ugSw9bK0rtTEdA4M+7/Qe/REt6yHiQQ51fQhLzMIeOl7DZrFs\nt0REZFkNtqMWwe1B3jyn/b/AjwcJGIbevygu/uZhYeDfFIcI9pf9NNPyZeEK\nVXS1n8Qg8fB2QEN1xxmZ/pjz06Hk1af8sqoAnypHy2InILd/Umq1FXajKX7H\nfLllZB09flO1p7Ia1/kcaWAkHC4EDE/X0BuLkTE0kECuxVb7ZrdLzznXHfda\n5VCOOp80nV0axuJCyoSJlmdaPun44b76yyVNA5/dv0UN9RG1QUEqHuFBykSZ\npejtJVv7cc1sWB+ADHFgwQsSPUsHCm6Hmjzsr5nYZ4TfmKl21g9KzCJsUiny\n89ebFcXnzKPr4ihOfcV4DSPoQ8hB+DKl8SEnMRWkf5X+xQI+U0ZlJyStfKbU\nTcR4jEeqAifKtQEa3fOIx0Ld3vWX+/HXsPuznlKJMUCIhNzyb6AZjsdDxxNx\nVNn7\r\n=qHv5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAHvnep8T8lQ8sgjePfRs7XGhZMN/7eQP0RkhwXpzDJmAiAIhfeQTuVnB9JHJ+d7iIAybyMsNkN7iphli8LUIXEf5w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.0b5c7f23.0_1583963654723_0.0008513043339462012"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.6c0f0b27.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.6c0f0b27.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.6c0f0b27.0","@material/mwc-tab":"0.14.0-canary.6c0f0b27.0","@material/mwc-tab-scroller":"0.14.0-canary.6c0f0b27.0","@material/tab-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"642e3027b591cf821c0ef159a9bd31f56677de91","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/642e3027b591cf821c0ef159a9bd31f56677de91/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.6c0f0b27.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rREw1yLYjRZAE0g36RdhK3BRe3qoCGTWXP/PfQdf6zRCkGwyqHh83fS1Pon2knJqkXar94wo0ceqQVzKCIH0Kw==","shasum":"811f7edf811a1b22fdcf7ff85a476c97c20a98fd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.6c0f0b27.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaqbvCRA9TVsSAnZWagAAmhkP/3RrCAs+0pWg2dxBfHa1\nXXWhnuSPDg3a9TWYo2zrqJQHRbIloxn78sVpLi+qcw/i5bY1mkkQ6w5P9VVI\nr49NLBMIQpItUyMtj1fMgiZTt11x4u5mmMRpW4HVbeitJoHe+9qtC1G5Dakr\nlWpHbg4recKelig7tl9ivQMALE3oT2FsG5v5OkX+NZFYVWd3pXcV8gvw7ELq\na7qCE5FJG2lWRSwAtd+DML8gPVd+imKk7917gbC9bd1FejFu3aFKsYxnSr53\n/1pluAdM/OIEYi5RMNCl42oyWVFj9PVT4J+/+q2xPOajXXjAy7jevQ0BxUYa\nV0OTu04ttZi2NP+JC1taai+csqVUjjH0Z4gfRbSGkPRnPd0Y2dMSHIh4srJd\n9FpvMenYSFGx3EgJHEZcZ5JbEh4Am6SrL3Rti3mHqGwaebMpZXSjn2+4Laqj\n4BuESSbOeRvNxLwAUy3sqoq43HgzEkewv1gmAZvgF4cDBjVDjeIjoICXphQY\nH3nY1PPhGrd0//y4xDKWs3J/JPVDcTQn3Lr5sQIS5F4O5ndFxdGMDzcI4o86\nbBov2nDq2WjDtlHiCnhJAxscjhhYHknlnzTBuBAiIXrJYrUAHIuk7LrqqQ/G\n776xhqnA9mWP1fGnKKu4c2LWwiPaFb4atR2Kt0g3++8t1U6Ydn2Lku8MtnBo\nSYgW\r\n=AO03\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFxuFnjfR1r1WLwv8XihzgpZa8x59IIQG1ui66w77ZdKAiACBZPznouiMk7rSCMMhijTsZDxPKLn1+w5LcSVV4lVPg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.6c0f0b27.0_1584047855325_0.54017874979212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.b6c53425.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.b6c53425.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.b6c53425.0","@material/mwc-tab":"0.14.0-canary.b6c53425.0","@material/mwc-tab-scroller":"0.14.0-canary.b6c53425.0","@material/tab-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"21e9310c19b1139fef9125fef8610235d0ef0e4b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/21e9310c19b1139fef9125fef8610235d0ef0e4b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.b6c53425.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PjHkQwFl8joZ1upuo6j/Ft73qGdRt8JQkW0L5Jqj0ylCdtY3sC7JbGOVllQeBq2SVBST6qAxm3NevMFnprTH6A==","shasum":"25da23aee3de2d6032be3894f4cd1a4032e9f4d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.b6c53425.0.tgz","fileCount":16,"unpackedSize":53454,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJea7sRCRA9TVsSAnZWagAABfgP/21YGL8ymmWa0sbuvvdt\nNZb8+nEeyd1VifUA6PR/BQ+Z01vY3aVqNruAUXThXe+L1hoM1YKjyUeM3GJ9\n8CjWIsSy+IILd4AxiIWc3wR8md4BQRKox3QghGWxjhJgKQixiv/te0tiv0b7\nVV2rT3dUoeuVjUySeH1wT/hUGQbs+NPltp566C+wLxeE3x/3w7Fje/XQvScr\n/CsXwSnbC0h5vd20RIa6WP9AgJeiiO0XYQ7zZnHW8l0s6sQSYih9swJCyjbV\ny/V/7MBMWUaAbvxSBk/YT4pVSptUOLlcTvKEr3LL9+lXTc9jVn9NWI2J1j6s\n0qmLdSwCPTGnh+eZ1EtTY/bYeYDuqwgeflpDbw75pLlXDP4MztIdcuoumDaT\nd2kHKED9CrQp4nFf58eHh+NOHWlN6sex4b41vZ+dSlceXzUVgce4aYO7K7Kh\nfiFkrB0tw0ntbjfl/77fAUUuPyweTIhvFYWKY3jbQLafE3jTQv2Bdo+6HZ/X\ngr0NODuwBlbwlKUm7ZKU6P3Vq8zbEyR5y8YWBExiVM62Yd068nJUyFx+fG5L\n2wIVAFdw+xO9zI2PaZWa2ogmNmuTEy+gRMJjspkobT0ijdhGPX3lPep0WHZH\nS6GtANsfy68lPyxKwaEstH9CBGTlp0OyPjM/VmHJSuQD8CgEhVjiJQPGmFPl\nzTcK\r\n=7MZ5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9NJSGbvriOo2T8kZ4oHKoL1fdwbdDzS+OoUTxKhYBKAiEAr/7UcNXJ8EEX9aU9Zd5lfJuBVpJFKYo+nBuyF4EdiEA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.b6c53425.0_1584118544766_0.33794712524230897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.306cabed.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.306cabed.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.306cabed.0","@material/mwc-tab":"0.14.0-canary.306cabed.0","@material/mwc-tab-scroller":"0.14.0-canary.306cabed.0","@material/tab-bar":"=6.0.0-canary.bec065920.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b07db227ed0e98a8a55068a9460e3969aa14b37","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b07db227ed0e98a8a55068a9460e3969aa14b37/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.306cabed.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-33lgggw9A8mRpsYDuHLNqevAf7jwaaQdXxcYhojcEovZi7XeCjkaVfkG8EskAGNmnCnSztqZGVNmGSNLMch4pQ==","shasum":"13fd711fe90bb8d358f8257819a2aa84878f4b3e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.306cabed.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecT6NCRA9TVsSAnZWagAAvDIP/0ehmmOpVWn8CAu5X/sY\nsn25oNil0R+V24STIvaAFUZE9GKaaN/4fiqd2xv0/dlRVL69zHE53r3mCN3q\nS16i1YIARKeUB3rPqOht71X3xsJYlQ2YBJJYotVqKO6Y70MAKNtOGFI+cbMi\nflfKXJuMs6i/T0TJBbCHyafzCGCOSC1BXY66zWbwEkEzItDj68udM6VqkVhX\nfp2MrROHauKaC2UchahCVAcllctgv7vHvhXtjlKx/P9pNsri4gt8t6/T1xOs\nDgWmSA6jXBvN2wkZW9PepXJRFZAJ1lwZBZXa4oH8pxzb3r67CqvoQJB0HnxK\nCRIvwPthV17m1OBd319z8QIPfMh95YqVl+oK8HeFFdopPxf7gvuTtiVBPAw6\nF1DzMZtu5jryIeABzRNNc3wFbfEHNSTGX00ZqfySXPQHBOstflDozkIJPTIH\ntFwOthvJy3zN67AAepznv0Yu+iQS1CO6PIzZJcNzbp/i3Ls9TLu7LXwH7g9g\n+2eJ7TEBh3UXLFYnzx7d6cX0PIuJSGKuP1PfKCghmgbFnhlS6wDmC7WMJ092\n61GLH+hJdPxDjYIg6z1YKzfI7pGKeyGN2IbNop5ctsubgaX69nnbzM0wROrY\nZMCBkmmei+F70RsTMtrRpORES9HhLT88VwmNgAWKlOLtHCy9feyUf5Zmh3/a\nvxi6\r\n=QhsF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdbl1wwQpPGDjrGjosNsr8Lj0BMUbH6nZCDckrX1wDyAIgHTE/9jJ3Mq+ex4NAjECMtJb35WJUdrsSNmpJBziGwYI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.306cabed.0_1584479884944_0.29666676557742555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.4e250cbc.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.4e250cbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.4e250cbc.0","@material/mwc-tab":"0.14.0-canary.4e250cbc.0","@material/mwc-tab-scroller":"0.14.0-canary.4e250cbc.0","@material/tab-bar":"=6.0.0-canary.776291ef0.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8e0b10a13a5b20d13409bc4bec6f11a4ff757663","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e0b10a13a5b20d13409bc4bec6f11a4ff757663/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.4e250cbc.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-84Qmw/5r68Q+IE7esL2rQIsNv2Cp7GRG4L2uYWwk9BgzwNeLF3rre57dSuUqXrFkLO8dBsy+4Ay8qDgUPS6Fmg==","shasum":"779e99c687642451ecdcf5d4bf053d2596d5eff7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.4e250cbc.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUABCRA9TVsSAnZWagAAcwMP/RGV+cOwV4yvNwBLz9DE\nHKJ8JajzzS0zKgf437h8q3HM181zdsCYF+nTvlyvjNMFtt947k1iZBLHXEdl\n0RYlORNs5QAPc95cUC4JmMKcztEY2HSiwsXHyC+6xKiTFewszNdpgpXo8Jtx\nlluZ7hOBC7WyNNAUAcsyxLLAGJGcxBHqSMqEtsyc8Nd0Y1hLqlEGVAuQlcM5\nvrbgzFtI+XUG8ixsHmBzXFelEequka5MKpUWSOBP3stpaEP0IcXZwXA4z4+x\nGAFVJJEz8kddL8aQjb6p9QABoCaz9L9WslBpQuw30PI4aZpsKYPiUAnI3+3L\nntz6vB14WW0yj/WVXi3XUbh+PEZQPqXm+V80u2cOODT2N6aOIiYMKcLFter5\npFLA9/4CKkf0A8hU2ptchbQtjl335AudeYCJIfBaPBF17dFcIwMPr2XAd6sf\nLZ6kL91qVl51dsKiv4Ea9EXfHQ/AWhRvhzdODdPo2ABXtj5qwBsicjmHG/nC\nxrn38C7mp9moHwaUNULc+x+J7imjhoIf07yAbotXoPlGF1G3DXGGhIBdsA93\niCT1HvsVxS4i5U0/Ut93DsB3IhwofACsBN1FexJQ2/TWciZNWt5PK5AX5a8T\npu20Scx+NlukWzinOZBldpMLuf0fpVJlisWUbf51d/e+D4p/LdjMXMPiGgW7\nngbf\r\n=aMsD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9MXOt/G2K4CPR96m6MRuSH2Y34fDG3RdisicUzZlGWAIgXx3DIOlRpUxr/HuUeoZU58BR/6Nme/t3XkLaDpNu5gA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.4e250cbc.0_1584480256914_0.4218205186362356"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.ff82d9ec.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.ff82d9ec.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.ff82d9ec.0","@material/mwc-tab":"0.14.0-canary.ff82d9ec.0","@material/mwc-tab-scroller":"0.14.0-canary.ff82d9ec.0","@material/tab-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0af402cd2ff3748cfa5f7956ad2211ec9271c83e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0af402cd2ff3748cfa5f7956ad2211ec9271c83e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.ff82d9ec.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Q7pbQgJnpu/j9Loc2KR8Z2n47GqnY7BisJiWcJLDMcFfRT1XzKdVeu1qGpzzmOcqCtgZ3FZzWhqAEt+t3/PxHA==","shasum":"120f460a2344f824a2f083e2a153302e23834621","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.ff82d9ec.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecmZYCRA9TVsSAnZWagAA1yoQAI/aXYrfIYculv/sKxHF\nP1wGFnH79dYuPVvWC6YaXAbP7MS9nnHdtN+0xlbjqa/JWqz7YiN/jUE+uME7\nqMABjAXYkrgUUk2F0gqyrodV+VtsL4ox8emMzsc3eCP7NDmXQq4TvOvLlRKa\n0WiMK4CxJbJHlPCCJVueuhAZ3JwjuOC2uLYdSnbUCHuXDCEDm2pPpOuV10zZ\n4384lJy5x3NiPGz3gC6ldjhn1ISGZQHY40jJEYKJ5zx1WAazPSkRsR+qfWva\nvuxk2BwImz/jlAYDOIqdy2JoOFsqiGd8a0xfefGKLsMUysajeNw7GSH2BMPF\n+DLfpuu2vyjlOY98JAmvd0dV0IeAjCqDbkquZO4w4UscRyGGBm9jdn0VuuhF\nnT+ClPAeGu/uzia34WTPVbSxGr4St8G9j31XU2GfgU2kPGsGUTaU3ysnVvGh\ngMalDzFnySwfavQHLwpm5dQjnmo3MRs9OkchpxlMKEjrdNpIcwSvaX/pzoCc\npWpk2Xzy0WR9Ni0I4s9GkKvD/DLtjXYq1zd2ijIgX6KlJKAmCK18aEbM1/rz\nkFOUIvsZuY49qcr5qMj2LhqMODluxDYAmByg/5dOUiOEK/KPXlInqMPlns6D\nSEDFqSfzTd9L+0EvUIMh1UdGmqsoU8XprBKfU7XzFYBXtGVrUOZKpFXEyup9\nvj71\r\n=tXRk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGFEKRLAOj+H4c7z/uwY9xMMlNVY3ErTHCz7otmTWM3DAiBxuqTHIS4QV0oP+xhXuHQH5VGUFTowGzbd9wnRuUtQDw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.ff82d9ec.0_1584555607662_0.4021114241455013"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.f50f48ef.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.f50f48ef.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.f50f48ef.0","@material/mwc-tab":"0.14.0-canary.f50f48ef.0","@material/mwc-tab-scroller":"0.14.0-canary.f50f48ef.0","@material/tab-bar":"=6.0.0-canary.6b48781bf.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0c4d2eecbe04ec4e08549650e593ff154b7d7e84","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0c4d2eecbe04ec4e08549650e593ff154b7d7e84/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.f50f48ef.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-54+yAllgPr3vkHbrRQrFx3ZfDYjvasIkfP2yhoTvCJMTentquxLOvDP4s7oA7yuGFOuxpSaaxPgCtGXjhxwZ1A==","shasum":"776570594056ac7c724897d91857e49741c84472","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.f50f48ef.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec8A0CRA9TVsSAnZWagAAyioQAI0AomrIqgAVkKXAMqdJ\n04ishaMOg0qU19HE6JV+oH0S7ZCKEXPS4YIcm+1d3F5V98slEyRHFN9WjSdB\nUVc7iGV+BxtI4oXyK1IuVdaseG93j5K9GiuQ8tOkxGK5vDNvf2P2W3DM6hLv\n325rWRSSOLDlW+V2EXqDnMBNTn7Y6AIjKPot5f+N3skQcTci7ZpmZcSUIzZ5\nNvcogSm6JmWvijkJguFY4kXE1T0Flko68hSK6w4lPX/JpECBWk6A6/o+nE7j\n0X78UhjXGATJiuFqjvLrzUek2WudiIIMcYXaqF4RfiNjqeyGX1qDF2AHnTKH\nV3Fz1v6TqVyzQbHOdPOgyk+1KM5BKqKzoxw104D4r3mk4wxe9DCVDbIQ8kud\nVLDakuZdBfABx5K/T+wY6xup2i6iHVxKeLYUC1K49AN3O9MvPC/rJUklIWbV\nB69pOoR0pvcK3PUY65ZXRjYz1uLdWEoaEUIACVNHjEZy3gD9la6s4/8vJQif\n7LAZbUr7r6Y6z9jopHY8IKV5wRAd62pBJ/Ms9Mf7qlyw0vOeGDP+jlZraEqY\nZPJiX7+6WC4O7vaxq2iYvm9YFK3iUWRfIe84QLtEGGjrBu6cHOmNTK9HLl6e\ng41l7JLUCaeApncakCM0+YNL0Zqw6ITNn8RwPr1q5Jg0bK8FJZZ6L1zagncJ\nOVYW\r\n=G8C2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCYnDcsXY97T1DkJo5gAieixKoWibhIfe/jZkrd4t1dAiEAl1OoMlxINGPrpZs7s3ucfz0HhcnHkq2rMcQ/y43Bne4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.f50f48ef.0_1584644147730_0.40272132436087893"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0-canary.134cf877.0":{"name":"@material/mwc-tab-bar","version":"0.14.0-canary.134cf877.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.14.0-canary.134cf877.0","@material/mwc-tab":"0.14.0-canary.134cf877.0","@material/mwc-tab-scroller":"0.14.0-canary.134cf877.0","@material/tab-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c237581285beb5a84c39a5ea15dc95e9a865e057","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c237581285beb5a84c39a5ea15dc95e9a865e057/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.14.0-canary.134cf877.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Un/YE7At0nJA6pUX8JP4LpgLCvtajM+Rt1WiEW25EirVb+vpb71mWw26gFHAURvVLhjhdQ71ozgzHmSX0qH79A==","shasum":"f9f1e52cda4404892f689bcf642a0c0abe738dd0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0-canary.134cf877.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec9iPCRA9TVsSAnZWagAAVyUQAKHIP7u61Mf9JTtm7afe\n4g+vyDpjh5iH8TAhGvu9Hy2daym4/BR1VQubebFoRkgxUdcAW0AEOgR09F/Q\nrAhrsCdQcjKUJ2ijzW4rXlGfUbLmRwwliZ1XKHcUNQe3LMDktf6mFYAJV2IJ\n4wC1YNXdbYjwllRPhLyH8eIx98oEXKkvhAVF4X9aBbsHJLk+H5lUbwTuVW+N\nnyf/eBqI5+LidHv9JXcW75QLNhpY5/feauoDDyfbueAAnBiCCOB2XWrE0FZq\n6mTD+Vm7oiCU/9rek7HB/EoTki/CUyXL7AnNC+m4JUB4QMBCjxLZ0lwgw7Qz\nxSqTp6R5l5Q5t36pRnx2v8Mat/UDGiEk6xsl3oRl8OXctQ/etzSpPPhp7MYg\nEIaBINkCQhEebG5G9d5VI7ZTKmY2EmwhyTOacRaXQ2F6Brd4C+ohAj/Y0Y2X\nk5sb9grkb2uC5ZS19uY6x0ac6PNlWMNDVpjdXFC6ovuPAOgiIajQ4guRGGvG\n4IoKgFFKXrCdCq1WeJUe94u8+MGN2POJS/bKjdw5T2X1rkx0QyPGYgbeEeT9\nde8ms8CzltUrc85D9tlLUFMCeZycKVhFLGO64WExqLJe/acBmb0EGFTSpnMf\nkcNYXxTqlzW4OOzSH+DmhPI0kZbhM+rhUOAZ1Jzb/as5CFI8vVurNWnjPyN2\n1eEu\r\n=GhRL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrvgBQAM+tcWA3VnCDzr/U+B1SRdVKcg/K6IPGNB1uGAiBqb0K2rJ+dczvip0GfTZZ3Mq1u9DFEi2P/CeXvZsbptA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.14.0-canary.134cf877.0_1584650380382_0.28758897205833733"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.0":{"name":"@material/mwc-tab-bar","version":"0.14.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.0","@material/mwc-tab":"^0.14.0","@material/mwc-tab-scroller":"^0.14.0","@material/tab-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.2.1","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac28113f4d46ab2f986ce0aade128eb66d3017c0","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.14.0","_nodeVersion":"12.16.1","_npmVersion":"lerna/3.20.2/node@v12.16.1+x64 (darwin)","dist":{"integrity":"sha512-VhLaP2n3ngQ3lIM4NgTlBG6t3UVwzQFwbDGhS7hsEweqRoBz+vB3m79yMRkD340Qk1QgeZ/MmnqQawRG086lyA==","shasum":"1df45f13b35f4cac69ccd8e65a6b3c7ea3c4d393","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.0.tgz","fileCount":16,"unpackedSize":53562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec+QSCRA9TVsSAnZWagAADrsP/3tqDh9pyReMp2xsT3sP\np/nbsQ7F54zpfKPIPmygB5wOG02KwrRckyMaEWWaQMzdQcZYz1A5vbH9sCAy\niyia1ZscZ1XJb/g8UV/kT1wkydb8QCbKr3NWcuUkxJ44MOkKn9qYdbnnl7J9\nI+I8o9omc2VuEL8vw8ZZJktlpqs0A1A8EieXiHnSMgsaBSuOW7V4Ve7tL7o0\nyYHPQf1vSaP/feOBWiPKuME/viOzKIZlNp2FpHBqOjEdVx9U+LntzkMAPdlr\n93h6jYqsl45Ute/r0TMVl/18O3Wqu7lRF7FRQVuC2VkYH1iDJBkbHHxvy3w+\n91tZtSXVw6T/z/RKZkHaxJFPLlv4UmnW1dsBGUqwwTepqDOjCXPR9Y4UlrnX\nJ2b2fKCRuJoRBJ2U6RcKRURk0OSEoKCmvSusu5WspH0wIOJbxXvrmYBizihV\n+cBgWQDWmCb1PIRoqz1i1n1m8QG+kZF/JWHg2UJi/sb6am4bSrHAhnUZSo3T\nqoF8e0iP603TyEaTXHxBL3KKNeKJXB48UmKcDhJxT4oqSut3/fZ1OGRNMZEB\nEOQcjeIIbROphiugTyOtNxFHcd1dJDN8cmqkzxLOALh9FhmjphQGwBxeBine\ndcOE50hkJAiou7BwbibdtKyn9PjIGZoSXO9gjKkNCzwWfJcvLdO0F6sAI9BL\nLLQO\r\n=s43x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgTClPyF2GSw54TZx4cpO5CI84Da0ZP0uAnjfOa2kWfQIgLwnhRfX05n/mTdgr8vaCt9OS03DMeR3iHFj/vr9NDJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.14.0_1584653330530_0.5005871312663339"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2c1a4913.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.2c1a4913.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2c1a4913.0","@material/mwc-tab":"0.15.0-canary.2c1a4913.0","@material/mwc-tab-scroller":"0.15.0-canary.2c1a4913.0","@material/tab-bar":"=6.0.0-canary.a88c8e4dc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d9a4fb2b0ac4979d966b16e203b2dd0f388554f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d9a4fb2b0ac4979d966b16e203b2dd0f388554f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.2c1a4913.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PGuP5fVebrXs9U0b02cTk/K672WoXP48v23MVGmfCI5UcU4No+WBAAAC9G4YQ4z2/C58DJjK5U3y+BUmhgKLoA==","shasum":"558ef28cb920889ee28e4dea45731a833887378d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.2c1a4913.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec/m8CRA9TVsSAnZWagAA32QP/1o1i90eWdZ+YyGIbMiP\n7viXZSi78Db2aKsDH3pP0lPYc40qKuYTnunub5+tlIXZ6gyPMVCPtlor8c1Q\nnaVz6I002yHZwvwYt+tOuC9x48UDmeVkycU935Rb85vg6VUer0KUfd2l+WQL\n7oE8ymIm0eH276VsezpVjZdG8zQicYpwkNI8YNsxRB8M2rfH0hbVTrQEaWua\n5fGErPXdYX7UhSUXTy4JqVzAvnJPDXeTMLkgROR6G+2Mz/dyPc9nkpfW3T/R\nY2LtJ2h9wGPdtISApGWi2WT0Y2v8wx8tbqKPFkFxrj6B8VkHe8aXm7ifTGni\nHOuS8D73ATW+rXIiqaql7xoFDHMp6GC0OJnNWZ3T07omWqp+WkyaFpkbTd+9\nhLOMhh6wz1XxZ+w8EsDvOer6CPX/tBAGgEn4WWr1OXB16B2b8hsxmlwJHn2b\nEYdbcxHCV6CwPnwCzGEr7x65eP8KnS+f5jqImuGwlTV0F9h20qErAprLLI1I\n1j8noQcfJDdEMEGxU4lBTLy568MePsvq2W80dD+mZC6Qo+qJroaYOSst/7Az\niMC0ito6u7gFAvy0V1kW9J8rhgVHYMHt/892ng9Dtrx6GjgzkvwLLc3mxJ8Z\n/pmy3gGhHJcuCBhGaszYuhmM22lhvdTrrW81R5PjR53v820rM5rSlZuim4tg\nn8QZ\r\n=XFgx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLLbxLaQubrg03bcgy4pLgkSm1jkb+ySyRAPZY3USZFQIhAIKg3p7+VWVcDn75cSS3fXqc5kU8NK7aoMSYFe1aVPJw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.2c1a4913.0_1584658875708_0.006933707490646368"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3a6e481a.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.3a6e481a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3a6e481a.0","@material/mwc-tab":"0.15.0-canary.3a6e481a.0","@material/mwc-tab-scroller":"0.15.0-canary.3a6e481a.0","@material/tab-bar":"=6.0.0-canary.cafe18860.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0d89a3406dea7d2d2540aaeb339072cc01d18e2a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d89a3406dea7d2d2540aaeb339072cc01d18e2a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.3a6e481a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-y72G5rAcOs5ZnE78kccoBUZsD5WQ9OaN7dKlD7Dp2/4KaYQjXHCvBwlA1zFXUr7/fsW4DIPWiqN22kp+KdDqog==","shasum":"ab1920990550e94a507dd1796688fa9b8d3729b1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.3a6e481a.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedQfPCRA9TVsSAnZWagAAUZsP/02MxL7TB97SQeWZocb1\nC5gWErtyTok9W5wz1ADvc/wNnuskzfKwgKFD2Q22wAb6o7gvpxKBeRq6Ou9I\nDMUWofZ7abJhsCm+g+Dq7ok6zGu8aumrtzzqKqram+0Istje4W/21VXa0mA8\n0AY0m9cPRWnfdlNBhVRuDatgyqnVghug83YT1ZIGDC6RIzWi44qfl2XUWVlW\naf8TNWjglQAaGEhNn10n1mONj88XSjoqx31h6IiAlVl3iFC5QQFYdKO75Xf4\nrFbAbLdu9Qvz3IEkbJDl2flZtsTl/nomd9ZI7Ze4EaC+ufesbafNeKIIJuOH\nTzpNt/kSDV9hB7sQ0jTGUavos4wBlnpisBeI+Lwm1vfi1TYCp/EaHDke6rFK\nvNenBOyL/P06W4t/PiZ+fRG1BoZWXnYubAkn/+ge4nCg6vY1TG2LJC96Cniz\nAh4JZClS1ficZmVRVk7oCvHk1S/JfZ2PQ158P7s7aM7Lfxi7F3z9qmLo6vPW\nmh+YPpWlBkkN1FAdG5t4gl4fzAFE8M7VIxc7Zv1BawLuoQ4lnwzBpHc9GVb+\nMd35iqeHPz+OvmrIbvEEJ8GDIZht/bCSuYLe2mp4wi2O4tXOZrKilshFsPh8\nhuei0lN0NZBzYHQOx/zN9TS3zTFMyDXFP5DWaD7lCqX0zVjLjFf+1VsGFPHE\nvJej\r\n=+P5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDchWN7YRzMC1w4WNf1J9LJOW0OeUP706OKE+7QKHXI9QIhAJEDd+iOTE78lGqxHaBYetWA7TRskvS7Wttvq74h+eAQ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.3a6e481a.0_1584728015335_0.3835375251716735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.603d6eb3.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.603d6eb3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.603d6eb3.0","@material/mwc-tab":"0.15.0-canary.603d6eb3.0","@material/mwc-tab-scroller":"0.15.0-canary.603d6eb3.0","@material/tab-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c12dabbae50536d5adf2b5a785d4a5009e53208f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c12dabbae50536d5adf2b5a785d4a5009e53208f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.603d6eb3.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UVo9gKJULeeoyPvIZ4T5TsZ8Ya0wtCh2Gr4oPWPPDkHzJo7/FAIaaQksNj56hd2X2SM0hjPvJ0ffL8fMhLAomw==","shasum":"6d7d812c08ec34a8c25de0bec47cfbf3f6d30233","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.603d6eb3.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedTdQCRA9TVsSAnZWagAAsiUP/R7PdDuTUpV6asPJv+iV\n/JCxnH6KA8TlIUSwQqm0Zu8/4yWMgW1J5GZKOwiY/llXqiAkoisxyO5d3h1T\nfP+iJu+2fth+aQ/MSonRXnKe1Up6vF4Y3KQhO3karFD9uMCw+/4ISsePrK/s\nj0DMC74H8ZIkcVCfllfM3bMIVdRwt4oNI1N9iNZjW/KCW0TO0FNi5eMD3sRF\n1zHVFNF5xDYasi12JHpno5AamSjYTSJ83YJYwnG+rEer4bCkhwrqA7M0p5KP\ngHcXq3zhPB8gwqS6YHf2CIz0mAW+2pQJBwDxob7f/nbA6htTWj7HX8Y04Xv5\nhWNIK/a5eMAod3UG+DiHjFIR5tO17gEvhEu+a5S+LYC/CVOsGL60PytkSl0o\n0urue99p7YRR2+R86l75AQ9VApfUhHtHinB7lrfruZ7C+Cuvv3FSL2d33JXi\nWV9cspwiUQFuUalu/eb6ywaneN/7bmMWZaLKUk574+658OUqkoKfrWSgVKna\nl0B1+bshS+7M/+bL0daMH5JhZRlHXXPP0ZPtYInMP/47EgTaLDIhV/tEMesh\n2QAaR6HDXpOjPtFLdCQ2SXOIA8jdOs/8O7BXWQuk5xN4GkhLFCNC6FVUM3a/\nlYSCs4hmoxTjskBGG8liIcWXuCK77GwLvJsZUZX4CRPLZjJmOYBdY8NlGBsW\nhRGz\r\n=19nH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEBzVN/UG6/1maYuMx5wOWVRuRDXG6vXlo79soES2XGqAiBdmPdNP9rqFLt8AfbfSpgU0DZgyZAmu4uJF2eg5kcpVA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.603d6eb3.0_1584740175521_0.9527792316197627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.05c6a93c.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.05c6a93c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.05c6a93c.0","@material/mwc-tab":"0.15.0-canary.05c6a93c.0","@material/mwc-tab-scroller":"0.15.0-canary.05c6a93c.0","@material/tab-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"62ce85b6b0e7c20ae9938ba7b42af970a40f1f00","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62ce85b6b0e7c20ae9938ba7b42af970a40f1f00/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.05c6a93c.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-1oSBb4osjeARaYdCpWSV1ir4viE37du3X0usvqPRr6MDY3gwWPR18lM3Z6+vMSe2HkWdC3QUOG1JPRCeFM6bCg==","shasum":"727d21af1705795f49a6688da62232fa1507cf45","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.05c6a93c.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeeOWiCRA9TVsSAnZWagAA0zkP/0ArEDB5KoVitC0ZjcoY\n+MBRrw3mNKrQh7xmXUMlY557qECmJod+cltEdFyE/KGUoFihA/ThssMm/JbC\ndnNfYTdFKN+YnRV1XeIjT7HhvwL2Eo/eCd/DHhKecu/b915GrsQlkb8x0KlK\nb2B+7v20n/y5oOZkhToesG+Hq5f3/+C8YoRmjUjmk/sSVE0YpAUfKWhhorni\nlSM+UtTrZ0IoxbyDrsTPGNDOOQHN/szd5I2c+OTb+EaVgSu0b11Hg5bJORg3\ndFL96ufCLWXHSsjgzX85c3blowSBvr5ygScGBafPoNxsPJ5zsoYZyw+OJ/eu\nAH+84+HX2UgRVJz3Q/uubBvBSRLLTkReseX4Ts0Mh3AXkUGwnz5KD7X0cAeQ\nx+iHiKGmiLJNIWlu43y+uA8Pq1z3BaJF+XOMmwC5ZS5upCBghxvdO2T5X6YY\nlrNfDoyK+spCbigYy3eS9o7fQ0PbxDJqeyzG1UlFXeRylHgC+uDt1Q7/XFMj\ngoSy9IhZSTeRSm6jyzWRgT7Pe4jWMHn/n1Cu1plPrc6PQupU0Ngd5u0afaF0\nlPZbWfFFD+FoeY34d4hprfz9eVzfTdKimxKbJJLR0ACf4y1MJAy9Mckp8s2X\nWRBlDb+65SauDX0HNXNdD/86/vC6jnb1xde2Kno3SAEjokCDAf3razyluSWJ\nq/fr\r\n=HkUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/DuHYTTPvYxKBSBDLEVGDU0Ins80CcOn2MJ7wppH2ngIgQHwJ5RuOiF9CsoCX2LzaTAr/rOBqeh2+ugyeBud6EpM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.05c6a93c.0_1584981410169_0.07183595083770133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.14.1":{"name":"@material/mwc-tab-bar","version":"0.14.1","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.14.1","@material/mwc-tab":"^0.14.1","@material/mwc-tab-scroller":"^0.14.1","@material/tab-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0de4ae05c3088b277f5c20ed01e4d684cc6b8b1","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.14.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-yUvkj9rUK/KGXyrgHCvA9yl4C28cDcOou9HfbYW7R+lV8x8lQC9ixdj8svYdoPusd4GtKeWkQM8fbRPEXkj5uQ==","shasum":"eb5ff0177489f3db78e15d9f21ecbe76554c9302","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.14.1.tgz","fileCount":16,"unpackedSize":53562,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeePibCRA9TVsSAnZWagAAbPAQAJ4+k3XQWRk2KXC2LUUt\np1e+bS8lNXYvasVky3dKH1L5FPKhfCcWKeNqOeYhUM8sWPZ4fw7BC3pEYw+n\nfSwauJZCy0Rpl+4DQYIvEuSh77zDnvXzeDcYCF1y8tME8dMxNjLbMdPQxzvB\nYF0ulkiPWYUuEaFFYyqOYguzeKYtNhZk1ftbB1iRLbucbpDl690xJEl6KC/V\nNEU+E8SzyrWjMWu0lqZ7JNQ1zgdNFRJ9eV16xjlgJKdueAbkZNqtuWYFsurp\nlgV3qL2TqXypJr+oafKVUWoPwRcIq8tBdvsTO3X6puqZdJdZ++NMurh3DAFm\nbInTUiizJKjIVfJLJdRX7o1tBdjSdxTW0r9q6Ho5HV7lWCHIP0NxyZbGMG/6\nicEywh544r8YWeL2DW+1CFE7gYp9FdDruUOIZ63gF1XN5TI3X1D9H209BLQ7\nbXoiZPHgZGNK4RjsBXiuo8uMoO0jcdJKFdd07GRbCs8HaSjAFOzJzyr45fGu\ntJMiEXhLkhcgurLoO3oJ3xdnrphB5YQyFpledtdgZDi/8qlIp1TFPrc/inDY\n+XcoIKiE0x2XXiPoV+Juzzx8SV4y/xj9U9anT7GJK8Z9hZxzok+hHOYnWcrb\n3TnYURYit2x7Y4Wl4Gl0sjUHCAxDwrGKkoe+ro9kFaqT2ekBet2dIQLuDJ9I\ndY5Z\r\n=bzYX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDwsVqoBcJV4H8chT3n/BMdXxZ8iuhvzvckzx6tSgfy+AiEA+OAcg58oDwQVER1HZnbYkRaL9VVkNW6onbnhXd2vDCo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.14.1_1584986267154_0.4930678086437479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4e6be3f4.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.4e6be3f4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4e6be3f4.0","@material/mwc-tab":"0.15.0-canary.4e6be3f4.0","@material/mwc-tab-scroller":"0.15.0-canary.4e6be3f4.0","@material/tab-bar":"=6.0.0-canary.35a32aaea.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1512aaf308db7992eea7201d4af81bf1e616d5d8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1512aaf308db7992eea7201d4af81bf1e616d5d8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.4e6be3f4.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-g/OvCmBvGBI1dpJPgf41lQBAjX3lHP02uFX21iyLGW2v31jXYuWGo6uaFZJ3smBdYSk2axDxKIarbcb3sUai8w==","shasum":"1a6794d8d9e9b08190a839a1ebe368ef614737ba","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.4e6be3f4.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenSjCRA9TVsSAnZWagAA974P/2EgyaxN+YNOvNqZXxL3\ndirSiQSfClCrW52DYEORZ6g8MglnJcM6iUoMhMmLxwHEv8CoY2eTQH24uAic\nXw7Jk1LpeBzX8n/r4r4xPtFf6XEp1GxYSz6Zbp1E8oIjLgRIUs/IQgfpeNNx\nh9q4KsCWiv2RobpBtvCkKKMK5YpVUT7X5QWkhqZl3gdtBazEiqlX1YiHrrT/\np6Qcu6C8/GWEoU34B6+dCZUrUYoU4dyY9S/epo+S6UczqZ4AnlO0SYUz4qYi\nt5osJvvxL9t9x2Yt2r1db5f6Hwxs4YKDZF8bgoMlGpim1ZAofmLFv9mRnYfm\npSI2m7nizyJMHyV8oHKlTO5fpjnPEdCTSj5iOawybAFoCdk7KGpzsYOcw/h+\nXmYrkDz72lXdAvHYFFcprzmEURVHJXRCS4SE2Wt0IKN6xqkFDF37/lKB0reI\ngQBDPKiwP6h5dDKIoKnvlH8FVyAWtGBqqEMMbQr+Vq+LbPeWv6K9IYp6pdul\nUiXHWoC5ktAKZE0EfvSydF3IVzusub2ZoExIVEecXKH+65N7W80GRQ+P9aAx\nz+l1GyC4Ox67vbBYzOIrRqxhPuTkq5iFw2DP5S81gh9xOgEJYhccKsBC7hav\noCi8VyV2uWnYQG6kHtKayH50zxxvCZHxJVj1Xg3IZYBklSA7+CoAlcCdXHpH\nX0Ep\r\n=yR+Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDdOOdMWMVvvoQgxwnoGgoa+DaDxYhWUboz9/QVuRHY4gIgd6VhBqEN/CQHhvh+cDq5MWZ51MLgZG9f51mf/mG8uZg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.4e6be3f4.0_1585083555141_0.8372539193735795"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c29a683d.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.c29a683d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c29a683d.0","@material/mwc-tab":"0.15.0-canary.c29a683d.0","@material/mwc-tab-scroller":"0.15.0-canary.c29a683d.0","@material/tab-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8425a605fcff9f0247ba649d1c8b16a70fe79720","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8425a605fcff9f0247ba649d1c8b16a70fe79720/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.c29a683d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-CvqX8qhMC7+n4akMBHNOaUnJ1HBfR9ersL0CwoWkEJ67ueqJCYw4MhENP/rnGP3smvvFz1tDcHX+4a+X3EqTmA==","shasum":"4ab57d3ad2ae72391d218397c48ec797912de881","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.c29a683d.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeenjLCRA9TVsSAnZWagAAaoAP/jBwzKPSOi+PpLBoe8Em\ni7PuLa6WY8CJc5bV2HdmucII2KQIgDFW84vGKrBYIhp24SnOhcCM6U258yXG\n/Mv4+8hnazxh2/8/DhMUTIXLCp939IicqQAiyhU+/H5jPZDtG4zMl71JkT+g\njlZKKzmsN3KzNHatluFFcJbthq9IBnVrA+sFk2rcKVsV2eXYMI+043s7ndCY\njcHhjZeC67fDqLu5f0xpCmsKCGgI7FY3pNyr11XpyDwpeIxd1/lrTpAjblNE\nRJGlZVLc6XcvmcyIQlFkKJ0TT8fLO3WaoS6LPCbcLfDKDXm74hQMrnZbt78a\n8Qtoc3pKgCGBF058rTvss12ck1Q7odQn5dMH4YkXsiUEj0fjd1Jq0N3J5SMT\ntCOIpCp/NrA6NjPn/i1a0/O+wjFH3fDM90CsXhYplxL0XexNeHy4axfK/RS+\nckMnGQ5c5M5107PbDEwaL+zO4Lwm7ChMZCTUAXDbFRkPvxwcKvsPUfYbIBEj\nnPKS/E/BkntsJe9L+bSClSATTxvW8X4pQpO7e5StOfzSwpOmBGM/YJq7RfZi\nHoDWFu+sWNuR696PA+VmbjkzlqKtUbafWU1m1giOVRbSybwewxlgn63IZ/yx\nwPj7QXxcLcwZKIeAfZp5ekCMHUUIpjC8f9lQYfwcytvQ1InOIxIYwvG/J1mY\nrksl\r\n=eBQi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR5JMRGIqPTKQNnd+jUsRz6YW7b+J/nseojwWqLb+M0wIgWjAuXlGGwvrtB9kLIUawIwFepsGfpJT8lhJ/bhyfJRg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.c29a683d.0_1585084619336_0.4321563381669107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fca3dd9d.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.fca3dd9d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fca3dd9d.0","@material/mwc-tab":"0.15.0-canary.fca3dd9d.0","@material/mwc-tab-scroller":"0.15.0-canary.fca3dd9d.0","@material/tab-bar":"=6.0.0-canary.8707953b6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3eb322e4775d836b8959bdd2dfe63f09dd0e0fee","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3eb322e4775d836b8959bdd2dfe63f09dd0e0fee/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.fca3dd9d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-GSTcFcKRhZvsPArjPB1mI9VDe2ypKzehPhB/En6RUkazJaVrARFBnjz+yFa4gmKDjcTM7C8eUeNCJeeww8yYBQ==","shasum":"68e4baf43ac71230874e67db096f8423254573ea","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.fca3dd9d.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeepshCRA9TVsSAnZWagAAszkQAIR9dXeTi6x7toYp8PLw\nyA/89PGarmW8Rfh57ZdDdaCy3LpD5tCvCAQs8nPB4txdB1pBYnL2LXVffKss\nxXyOAu12lgleXkh+KYPn6TMrK0fbIPsbkV8aAAV/Ca2wE8GHwEwspq+/K42M\nO8wbYhGtuhfv/i4ChYf5NL7jcZ8GFhrceQ7ZDS7GOLe8DOt+Pqq4snBdlrkZ\nte94VDid6KbyvLBHCfrB0pmJFvQ1+Q2jfPMnbX1LqSD+9zWpdSGj+CFvuDQ+\n7Mn0oAYFLst4ZLrTlisaHkcR28Ew9fAbCB1E3LzeHwcje9RtAkhCCUMcbCqr\nXr1TswCQ05b77HB959maLQzaN43kqd8tworEyNDASeXroP+BdadzRfSyDcOP\nZNsLm9Po//LYGSAVWmeHxMVrBnXJIDajePuy8FAHJVEKJvgQZ8vt3JkuCTL2\n6fNw/xHXClS4drE35K4J5exo8LDj1OcPOR9zaVWu/NU2I9EFmllhOUF20IGo\nFaXrh0gIjTp8puZ2WYb4FYm4K5N7gkS6jlNNG5WuTpyCmnXEVIGWipgbZanp\nvH4nScKPNq3z8s5lraF2ScaMv841CmUeBgHSrdu3oUPaSGCoP71de8ftrOUP\nteiFckrgydLTkZ3ysr/rDxF14hytXRB+P/0iPOMJQKbOeEEGNMMeWvKiXUvA\noZtN\r\n=gCR6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF9VZ9irf66OdpLRZiIpQodaAu0+aDm6ru5fINlH8n9ZAiEAm7ebzuu8kn/M6y145+sfRERlgPQWoYcO8TMHfpmviyo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.fca3dd9d.0_1585093408853_0.7858682400974799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1e73da49.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.1e73da49.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1e73da49.0","@material/mwc-tab":"0.15.0-canary.1e73da49.0","@material/mwc-tab-scroller":"0.15.0-canary.1e73da49.0","@material/tab-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cbf63b814d242690910ae4946b6144120c317eb0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cbf63b814d242690910ae4946b6144120c317eb0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.1e73da49.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6Izdp6I5DCxmiv8OErEk8BqGI7uB63LESHFhjOoKlCfRXNJsPoi8W87cgvTZrc95jB4vsDVvAyIJ6+L+PDbsEw==","shasum":"6f2955a42cb50e43026445f82520ab032f532689","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.1e73da49.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee81tCRA9TVsSAnZWagAAqxIP/R82hi+WP0V+aTdX5aqx\nLt0+BIMbr/ueI6mqs6faOkvLWxJRxq7PWM+QGbTfdaGnkcDsMEKoX+FtenDi\nCMFGbbs7ufe30B4g2GyIlRVxbVcQi3Yt0cqRGsi5gvsVzr6iiJFKvdGcil3J\nsdMHDX4Mxz6p4nBoj7ULh5e0g4fqk2m3UuKHvlACv40tS/76SIkbcw43iHFB\nMfxzzTJ8VgwDYmiDwaY6w3wsyxx3iNO0QHI3wXSOIuvy3KIeIfWW0vz5e22l\nfOEaquB6GAVrIQGg/mC52lledy6BDBGSOKLfIamsJdgRkx8oJNQM0ylwXcFo\nWPCubbBR5vcCuad4w2o5rbF5135/xXOMVDZEZ///ctRhk+L2Rw5kK0oL7IEH\n4XEYdhaIB6DzWni2Q/H+p9DjDCViR3Vqh4LleZvXwRO70BZlPpDY4K0+1qE8\nc0NC6VZVyKjaFWAWX2C02cAXHHTxToVXiqTs3ZV6Z+1H1UT3SB1E3c3+3BeE\n2khXcWg++gQUBHDhD26eTwza5vEW/Ip2kv4NqthffoTpJ+GPBceE4oKuddn8\nrCR7lBrDp6J1rusMbIn0AuXlATCQjMH2qkGXcZz3dmR2mT569gT5aviE/vJE\nkGLKtLVSNmMgPNaPEVxTOeZh+RPLbW2l424lGvV2TjQqQnCQuS6hfN//rJuk\nvZUj\r\n=XsrO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN1asGGSjGDFL2uwrGwqXWW41rRbroMFs77poFd/b15QIgUgAlc+GIkQsSJNkN2N66myuxWc9zyTTmo4PYeQZuQxQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.1e73da49.0_1585171821382_0.5782813621595486"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bb6dfc5a.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.bb6dfc5a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bb6dfc5a.0","@material/mwc-tab":"0.15.0-canary.bb6dfc5a.0","@material/mwc-tab-scroller":"0.15.0-canary.bb6dfc5a.0","@material/tab-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb2656148ba3ea8e2b2b5053396cd8d9ae8e52f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.bb6dfc5a.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-3VJHcBZFlt2lrZJkYetFih036P0LKEYfMiUTNg+PoLuOkMiN99r8OkzBsgI6Ve3bQYuzyf7RJhjj2//jLvHT4w==","shasum":"ee845197c9705c966f6cf769cda1f6fd90ebb3e6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.bb6dfc5a.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefVWRCRA9TVsSAnZWagAAdLYP/1AZF39GTXBRslWJLvs/\nZf1MjM5higj6MclpCNjFMMB52hbCyCetVHOcm91043BWfcIPbcZbZ3MOyP6i\n3shqT5H6iRMfH5SnRyCbIc+XdbaDyDVC7222av3YKHco0k0Ga26vXfflW0L1\nEMYoEbj8S2BcHUQHRTdNVMVT/+9PI/iHtiTeRBEqfeYOK3oMr3oLTOUB+HjZ\nwQz8Xey3zA6Y7dZW1kFp/GMxQYkNJ5bPsjvK1mmSFpVco9zbWK16kSIY/tou\nAOARY8a2BDiMAkcafbgLB+6kqG71bp6DQsnk/Eut0LCNC1Zoy4kKioUIhiSj\nHnQrCqfWcHnOaQhY1WDxFNWo4T1xBZxl9AEqgxbVtRwYGwxtUBxs9b8XbMoy\nqSLQTlY79y2mO5cy/hc8MZhkT+DCWnN0xj3Pwt8tCxsn9c6ojow5RM2kGdwE\nj36ZGkdLLZBFA86ApZpggnp2SXXiNCzgwox2rwc+/QujMCbJsCR5jyBeB6kX\n0xQPf0RVhXdHZDdvXw8rHCPCJbiToR5rzm+EgRjKFN0wSOXvfhI92LjiDCbY\n8VOFZEnA/wSJxWCLaqIlCrnS/+0PjApbSOMfeTSyi76LHbDg3nWAfKZs5Ej2\n1rDtcCrC+4KWp1XI/EczYhvTyGgXQwBH+PT3sFJioUoBTJMjpznVvuVXJ7Af\n0i8F\r\n=XIbF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI76r/HDvBceSeTxO1pQ6PzmtvD5hWabL35eKRS13cDgIhAPWEyXV4fxuwRVG7x2mVS+5iCIvcqeVBrLD3ePyZ1jFJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.bb6dfc5a.0_1585272209249_0.38836477919511636"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1884603d.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.1884603d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1884603d.0","@material/mwc-tab":"0.15.0-canary.1884603d.0","@material/mwc-tab-scroller":"0.15.0-canary.1884603d.0","@material/tab-bar":"=6.0.0-canary.10af6cf39.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9a072ce4f7812e5120dbc51ed124d9669e1f7be5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a072ce4f7812e5120dbc51ed124d9669e1f7be5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.1884603d.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-XR9yt/8u8xpJ/2M+9ruS/Fr9Tx1WZJfWNC4HxtZ0Z5CvJiWnFdkRIlJ8/mPnluZXaanchiIlSyaRzhy0S1k3bA==","shasum":"209ae7874b2aaf8b936994f367fb301616fc7375","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.1884603d.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflpKCRA9TVsSAnZWagAAWAEQAJhrUPkNiy5FLPyWpV+X\nu/BnZSd1fMjjiLVFsESHFQwHPFQ16qH0kacuoaDU1sQ5PmaSQl2yo1gcYFTW\n8/VrrGQ2KWOCcSDzw2O1e06R5CJqB1b+SVnpZU5RntkPY0Lbbh6sqvywM3hd\nwXaxziGKQMol3LZ0hOTUzES7a3enGlvlCryZEdKVJNN028PyAYh/lVM4PO8J\nb7qeVNhX9xTvZur/raXbY8JJnW5L4AkRtB/IIh4eQqZiZnL7B+vZ5wdHg0/8\n5+12Nljnqxjbn/bHZnA2mupQAaSw7ooeyRbHhxNh3zXyMOeKUrdRc2aJCsIC\nzIZGGPlZGsUFj/agd0JYDaIIXuof+5NlVo8Yaw1sspiHecFETYEculAGaSTa\nsNDL1qVYNI9ruJ0kRlLEuMnoh2xURgRySy7yTa5ssGx+dv3suCHIsGkQi1ff\ngP1BnsHoTad4eQ6oPB5Ou9VEFDnLG47L6RaRDG7mtqFeN1sY8EcunLsufJmk\n3OSM/Pgq1c/l57oKLvHjrg0UxwSn5Y80CRvWjqqhJjVMwXQi6PVdyjkxGaQs\nGwOLQN8P/IFmL+S9JyyDuCKhwGZC5ZOuy4B5wqpEfcvylk5neeUiqxVqq5Mj\nl0foxik397/hVyRIPZOGKorBjzWzDfJeAfiRgeWOlIkt5cysthEsoNaYj6/9\nD30q\r\n=VDrw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCR2Tpvj22eO+X1Mc5mJBiElrwSjlMMqi/zRQT3QWP9wwIgfvoT8xYWIOQkR1c4XJa3tGrfnlMEJTuadujeQsQZagI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.1884603d.0_1585338954362_0.283359716369169"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aff73cab.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.aff73cab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aff73cab.0","@material/mwc-tab":"0.15.0-canary.aff73cab.0","@material/mwc-tab-scroller":"0.15.0-canary.aff73cab.0","@material/tab-bar":"=6.0.0-canary.d6315efe2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"40f9b297ee5f13af191b6bf450012454426c44b0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/40f9b297ee5f13af191b6bf450012454426c44b0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.aff73cab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-29XJUHPHFicHWm3e3hlIU+YKdE3W/Wu9A9QP/tnI7jQHV3zk9i61HCLuvZP6sBfjtjGl9q8FfjfGgfrcfPr1cA==","shasum":"fff19ac28f5afb0f26df1fb16595fed6aa87231e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.aff73cab.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefmy/CRA9TVsSAnZWagAAee8P/jiv7AqGzLjHf1q0xBFy\nAn04Co+YUzJPEUlE5fKLT0R9FmsV9kj7FHnN0eU+ju7zHj2ZGi7maU5AKvK2\nYaZ7gboFHX4Uxos2Gr/3jVQsRk79oNgkD856IEiRtLKgk3B0sN/ILl7q6nm+\nWMIz5cwUApXSD3vcloAuJRHYcXh8i2lIznqiniroePVxVlDLPyy+e/Q7eaRz\ns2Y5Xgc9myoi0jvBMf7h4DC4oygGNWIh6hKsCn/4yukcDu+DVL318HLl4QpN\nSYaEnj7+/Z131Kb0akAyI/UgC2chE4k5TdlFvl/SaaO6LZPFnk0TlLKmFIHm\nfIPenMuSDa1ulM84d9OOj6jTOb2oehvz69woIwV7MurtSLuMRX0RpeUNK3ki\n3SQ1lmgzL5oJ9fpcJH8u9SZyNPSH4xqzEHGaCRXSvFiYAsSxPh961j9FaXQ7\nKIgxM/q0y8Z/swNIlUtn3TxTWVI9l7679IfarOcFSr0VsBkzHOIJrzJFIzIJ\nyNiJ+nAPFRy4pCgQqD0nznY02ittqhrDyBZ6f6sTfgFgbn8yWwpJOch0O4+E\nbws+ufPY+HwvYHFqWAhcUHvsT2ANvJmawSZx6GNAAy5MVzmv79ylqoJXnT4N\nqhl6PpC6FTCEmVs2J3h1wiuTbbnBTCDzteg+CoZut7xGB/w13S3u3WMjray2\nBP8B\r\n=QbIn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICrO87nqZVVhXuw11MzrFczuRtfw8blX55+kbmWp5OfUAiAyaeN82ZzwpBErMcuC37h6bFQYMffqIBV6JNKrt90MmQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.aff73cab.0_1585343678794_0.9418561090149282"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.63168f61.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.63168f61.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.63168f61.0","@material/mwc-tab":"0.15.0-canary.63168f61.0","@material/mwc-tab-scroller":"0.15.0-canary.63168f61.0","@material/tab-bar":"=6.0.0-canary.a3016368d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"84107987770a82843942246baa8226b37f269240","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/84107987770a82843942246baa8226b37f269240/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.63168f61.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-UoI7uyBwudNp3J7ApsF9kRNx2nb/Lt3ZA96/0ZzyO9lIqqcEhmqu8epZ1kpRI4asrG4PdFaTfk9OJ7x2BVmRQw==","shasum":"9d4f0ece05524af50f1c723cffe25ec96fa69c7e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.63168f61.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg4giCRA9TVsSAnZWagAATYsP+wcgJz4zGcm4d8SUCBBU\nJHDa7H9fb3PDRKQVv9mYMPZO3NzWdvouydJhvwewQhs4eM7iEZdYwqaAgKO7\nRdtpYDy8EOrInU9vFnHC6cOngxhHc5Btwcfyt1NbljzMt8fiZszPNTAnSIcC\nSIxaj/maP76MxQzsxg2RqlxeXCtcnMcQM/ksM/+LfoN6kXM7Sdm6CaiyIxkg\nYdxRyTbv61tZUAwB69InddV0DBrfluLQgwOdNU5mgWw5W0gMV3pVEXlvi8B/\ncK/NMSz01BnmNlna+1HgVTL5LY4YB1MBk7/qXjGwYRSOC+dOhY3csR3JHzhL\nkVxZyQE4ieOKuxjt3Tn9rpZ8MjBFJ1JodPCwA6pkorNBRAvjKgfQiKSj8ruz\n7Hp+rV6PHOLYdoCUKUCQN6Z6C72VBRgN4lrM6yCO8Tv3qK4r9qOUHjAjfNcj\nFUZIvk9DbvM/Sot5/VuxEK1AV16d/4NkgBXjlmRgNbKNFY4LeLgC2NMR1CQE\ndKzrTPeCX0y8ShjPZ/GUUke3dzwC0KUAo8zCJ+W64INnUlMVLZQZdJ5MbHMA\nDCQ5nr60H/J3zBWfb1mVJ5Q19DnO/VxQa4k/L/f+irFc5j4drACdW3X+cmSk\nR1v1agpqoACzMjs0j+GuqQmPbk0WixnMZJeWwzwCLI593/kC3Jot+dS8cSiN\nO64r\r\n=TZgp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICLSMfuagk04WS6BZts4GTOtNjQY3qeyInnQ/ZXCMfA4AiBtrw3GA5FjFOemS3IvyEVXkUEyzWdT+W3kfl/nbTK02g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.63168f61.0_1585678370368_0.1342830925805656"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9fb79b3e.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9fb79b3e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9fb79b3e.0","@material/mwc-tab":"0.15.0-canary.9fb79b3e.0","@material/mwc-tab-scroller":"0.15.0-canary.9fb79b3e.0","@material/tab-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6669949a31d7f92febd25f5d49eb40a5db4aa7f5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6669949a31d7f92febd25f5d49eb40a5db4aa7f5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9fb79b3e.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-bW5p7XiSQ+88jIyJBbDP9Bxw3QKPohi/k6q0oEWhVRVPx0g2HNWu3TsIssr7npy6iyGi9QkfxBe5Smf3sJlhpA==","shasum":"85574004cfc7dd27b0c27b45ed8c31b09cbf7930","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9fb79b3e.0.tgz","fileCount":16,"unpackedSize":53631,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg7QoCRA9TVsSAnZWagAAkk4QAIiprR4F/uzPzrV5rlKM\n+B+vLhDfZiH4fmxlaEVUGCVCvkJUNpuCki11xWaeFJ6jqGd3TlqJiTFWLN9d\n+jEF/AYyCVuaTX+SxG0fYtAs/K4WWnvdsYRO2C38h3NWVQWFVVpBGmVkcsM+\nR/RrXclb0Z+gy+EAJFendlZb+mpjGVhjJfRdy8nGEXpf1RMmRldcvkVA2Mw+\nP7R1VguQLh651qK13AY2Tmn34j3qm9PVGVYc52eFJZphkMAONIkNdTEyNIiT\nc60gNgdNKHm6e0DLB9Q9fDzGHFfusux6BMapOEyyF1KNpUpqZxZN6WqE7if4\n7QNM2+UWW3sqms2EeH+goBiuR+2sRBul1va8g8jJjcKibSdwv3SPANoH/h+g\nCWj7UaHwKJWunX+ccvGgTVKjrQvrRO7Oc6qAQqRuh2rgOwK9uuuVjwDoJB2n\nFOur4k5GmFEtEESwYcCWX3o1+I+26hAB5NDma6vyu+yuhNL7av6cpGFClW6P\nUtN8UcxNol3PWY5hNAdc8vBkbZaQS2FkGkkVtiqdtLlHtPChkd1qIIhXcsHA\nCZ0bQ/kuedUp8hoNZXHT8jrg545z5WrXDMTnsNz8+loMK0BWq+vbvXKieHXd\nnFba/dUXeVgnfy/i0HSOnqV413Cj2JNIO3JZAW8aKYDfpV3FdmajwX0y+MbW\nFwyk\r\n=P+hc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAWL4owhIWSORaaboKdvQeNjifg5LnKACk8/+Rx3WHmDAiArH4kdKUVreQNjjjWVT3+AY0ey4PEY7HnOwEu223EznA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9fb79b3e.0_1585689639830_0.7581523338459781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bd3e9e2.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9bd3e9e2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bd3e9e2.0","@material/mwc-tab":"0.15.0-canary.9bd3e9e2.0","@material/mwc-tab-scroller":"0.15.0-canary.9bd3e9e2.0","@material/tab-bar":"=6.0.0-canary.4b45b6620.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9b56904aedd36911e83576292843c11af1a00006","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9b56904aedd36911e83576292843c11af1a00006/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9bd3e9e2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-rtPwMheMC2ZiZYD2QftBle9NyMI7SJXWDR+IE7Kje+Owe2Sw9PjvlO53CNmG63+k0A2Kfkcgc5ycvKxwoWST0w==","shasum":"7b8ef640abe79f0197d048c9866debf40c8bcbcc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9bd3e9e2.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg91gCRA9TVsSAnZWagAAyWwP/AmpgpElc2N6kW2QIeed\nY2NyE3INZWgy3IU0dEL0dPuuXYECKR+9xt7bm+JouEG5Z4TnAshy7LLDXFO6\np+KsU8q/EqxZjkdFFrzkIkB4T03hrQqPtU0UGU/6Wn5I4ngzWeNMTZAV761N\nmFgw3YGB2lOfGcqNlfq0kh6c61RJtDaSKotXdeJf/omVNE6oDYwk7vAMIaiY\njY6jvE9Bte08H0DePZ5b54P6HosBUEg8HubOwMOUZHDxOedALglPL3GSZrAR\no17YqSVYDG4atuB+sHo2ugW9wcrgQ2i4eNrwHOuzKDn3KZiqyNqGMyj1ym4h\nK5Tznzu4su2ZShpbRskheZ0er4xDb4ZEzvQmFVVDXUZGy4UtHVHswREZT2yf\nZOdsXqvIZVs+hZcTpasgIQvJmd5B87UAQoOHco4kho4kIDuTCgLDo/JCMn/F\nqsV/hCEPck1vqmDUPJ094U3fTlTFE/h0K2ceYD3fIS7ME9Myvi2BZaIi2pLd\n1+9dyCl9BIU7U1em3VrpcsdvVhd1uKPSuusbRERx4BoBfTJs+zU5Waa6qmj4\nt6y/jhCqbF22PuXCv2nJQGGEwo5Fkb+dT3JF5fiZ2H2IIe3iZL7KVkJmmUyK\nLXg2Q4HwLnfJzT1Jsn00DDELhaU2SQRaq6yb/EQ3POhuXXMHE9nisctVVTz8\n85yK\r\n=3/+4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpNALzUJMNV3oSdkv9WeAdoOYkk/OoJ+hqQjjN7g0+QAiB8qMgXRARzd42kaLsFMybAETLFdgxDPSMIGysz8KeJHQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9bd3e9e2.0_1585700191783_0.3849016724778409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.072084ab.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.072084ab.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.072084ab.0","@material/mwc-tab":"0.15.0-canary.072084ab.0","@material/mwc-tab-scroller":"0.15.0-canary.072084ab.0","@material/tab-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98a539f9970dea2ebc84f30f462c69e72dc0c4b1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a539f9970dea2ebc84f30f462c69e72dc0c4b1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.072084ab.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-taaNiOiWkKpnT5hBdDI2fmf7iUbvUQhuqPjSh3NycvYBPAcDgAI2LqH7b6M3gRFy+CnpnpG1OCusVn/Xyw/YNQ==","shasum":"558fadfbb2ffd9bdebee61356bee403b2ec2319c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.072084ab.0.tgz","fileCount":16,"unpackedSize":54001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehOAQCRA9TVsSAnZWagAA5U8P/2+RN68Uhz4b4e4dJ/Ii\nYXkP+CZ6ZOXIfuWXd20m/mgqgGrHUX/tOvoEckcnQ5Umo807ad/GIJpGKBVW\nUsdhRpac8ASQO9bXxHCk0xQGocgzBrjOponKD8VfZ0jV9nR/zWyuNy2yUWQA\nJehgEbQdqSnwaeJ7lUU5/UIm1sbxzl9yDj9pNodyXX+NBj0lbvN+emn2snpp\ntIev8wsI2Hw+s96C7C9TBj2jTCnQwgvYuahSfe292dJhjAEHapiw4axkWSUj\ncVX2wqJC6GxJxiqNg6fJ42zT/ofFe0NK1bHSBBayAWs/CCdnOY0jyndUlrns\na1IxBl10vDTltxGnEO1U0FMhUJp2ZCmZURGyeyEEHVyH55j9lpAMz+PWjsDQ\nq+ToGbwCSGsA4xRaTbIr3sm9Jbg/BOCB2Mp/FDEzTniYhyOHCG9Hns1O4/h/\n13PdjMbbQRvKpjX8KI/B8VMMWEpUh+0zxuk+WfoXElS+LWGl3eQepweDtEAg\nfhmCxu1UMHc3uRvEtQi5qxLj7SECqGMPajiZ0VF7L3hffktuo/AFVyvaUVPT\nFAr9ryu3uBUQptwdLgCkr0Ht2bSR0dYFt/0p+Q+xpRUYaWmaZVUmx8zwRQl1\nAey38M63TvxJDu0QYujek6/eGBQe4rH4Do5rjE2oljEsiBPxwkrRMzzufpu/\nag8g\r\n=Kdfs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEnIr6+1kkyNMezSHS5Gs+aP7+mQnrDWGSArhRIX8AKIAiAVepJai/ZW+QifHOVdtOZJNAfJQaF9JcR4IZ9F1c0W5g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.072084ab.0_1585766415595_0.8030411365544212"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4dec04af.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.4dec04af.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4dec04af.0","@material/mwc-tab":"0.15.0-canary.4dec04af.0","@material/mwc-tab-scroller":"0.15.0-canary.4dec04af.0","@material/tab-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d47dd9ed52c3dc1e1895467031d4a7a1df6cedd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.4dec04af.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-6/yHZUaLz+6PQ1rJUFIavdtdNfQDgVnSfRLD1nMACHrMWBckUtBoFZKFiSpEuV0mClhShdLt56ZYmKegLk39JA==","shasum":"c6ff5e46f61d9a183415b66d072e7136539f4853","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.4dec04af.0.tgz","fileCount":16,"unpackedSize":54001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zRCRA9TVsSAnZWagAAsKoQAIHe4jnVPKU7BREHczCX\nPeME5eslcz9IDxlQmUlRjTYuIXgRmiE0PlAu4aXb91RHFPkTVdFjbntAEMF4\n/jSl2G0jcAPSpgatlGK/oJYVNRRRbQf72k/idQlMjqDymSJIkZ17CsIcixoJ\nzgrc1rQIYZdRJDypGSkaKXqhAbu9Ve1ur+WGbf9utbx7CvFZj2xhw056XEZB\na6+UiGg8j0otRTvpf7uDTJRq4pQptMc+BXd0a4TIe7WDxyNM6aCONEcKKmgl\nmiteGdNy6VgVFkp9WvMM1w0BcpDykDO7Y5yfIXxbaDweKR9wNlS19FiHFYNG\nNsmbzdvksYzbZsxLt6wMugwoZA0D3bueyCL1ZipypxoQZZZd5doqD/vD7PPd\nLU175HVRm2vwJcxgsMGkOsQerJTc1Da6RR/OiXPrgFnWftGQZG32XRo1dGSI\nA/DiV+RwUbqQr52P2HMRYFLRMEH8FMrhOHw1HYfueIk/cgh8JoLmvyNeLnVI\nMXDfyWXE6dXZrQhV2xKewCRBdrtJVOufGELdOZTuJjEPeWjSwnWJH3cSAF7M\n5GUpsbHB6PM8Nw4VteDjN/KYI35Q0JkWaCKhtzYAY2PdFPimAFbDrkSFMvzI\nwSHCx8Kxzzqw5gIA8a9644XIU46Bhe+bakMVPMYX4u9i3rw/rmCaJxIw+fi8\njS0v\r\n=T0L+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD3UJpD4fr5XpsrxVptT0bJ4QJ0yPwL6iBwczP3WeFygwIgaia9Ro/eLnkRY2u7mkGnJmdCoo8vmCKOyGeOR9vgCd8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.4dec04af.0_1585945809496_0.051868109189066036"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b676354.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9b676354.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b676354.0","@material/mwc-tab":"0.15.0-canary.9b676354.0","@material/mwc-tab-scroller":"0.15.0-canary.9b676354.0","@material/tab-bar":"=6.0.0-canary.e84b9c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"423f1ad2d234953804097bdb30484154440adc63","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423f1ad2d234953804097bdb30484154440adc63/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9b676354.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-a2SV855sztGp0FjKY2PR+N5MaSTuSmuCFrYt85YGvsvNDhKRZZNb3kwvK43NRhVNJxWMkQ1jjG+Q0XtauuM9zQ==","shasum":"1e511e39de5a54d48e38447b7ac22cc79d909595","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9b676354.0.tgz","fileCount":16,"unpackedSize":54001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh5zoCRA9TVsSAnZWagAAawMP/R5u6MaX54ZezqDjmukK\nrNIdikB2o36dALWNzI6OrlIY6R8+GwwJ5CFQ4ATt0vxJuIXSciP5BYF9wMv/\nM/+JPPrShNGV3f4olMOCJT2WEG742++17ysaCIZTtiKRPI9P2TpmgknPNgZ5\nq1ogcm2A9pwDnzQPRGBSuri2hQ0+HCJF1wxi0VHaf4+/EIAq4gTLha1B5Ume\nXFmQuJz3j5085zdpSxkgkuwHEPqtpEcAamBE/dCCIwUYiXITsX4hyHL5sPxS\nQoskD1nYGQNn0sJNolz6RFmmpX3cSSZOfJ1b2iu+2j0QA1ZqYpw6HyMXRxtG\nsfHwfUng/hRqZscou5WRca2mK92cLzj87dAfyIAOv10mxRNhltq+0iqzBRq3\nAc3Dd/KVie3dAttwclOzkmTercYcnigVprumgk7TH94GXEUFx5eXRVvIMRxL\nhF+iMCLkD+uynXIPp+O98wAPFcGW15/S2GsxYrAJeQS8co7DaTU/fMSAnME2\nzU92rPmlRrFeEOc0ECj5gDOBxyGZN5Zdz/79nfgqtTjYkS6NMtQZrMsza7rt\n4nENcRtoLuwM57eq22Y2DazFU/8++DKNbYs07JF/R5praeoWtruo5Viw1e/X\nVPpBYyxTdStSpIHfj9jn/XHItOGrGbh3rE9EPHlqTaZeL3tIikqxl77onz9G\n3yir\r\n=Y8Wh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxNRjHtzXQgw89kycgE1S7oPiqLkN+Lg2SZ2t/WLC/twIhANE1f5tp59SVE2C/CS2O5/8QEp1eTaPi0euvz9MycQdO"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9b676354.0_1585945832031_0.8495641463877293"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.6b946095.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.6b946095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.6b946095.0","@material/mwc-tab":"0.15.0-canary.6b946095.0","@material/mwc-tab-scroller":"0.15.0-canary.6b946095.0","@material/tab-bar":"=6.0.0-canary.f1f8e60.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b65dfb6b4d3dea0ac5681487459f46352e399e2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b65dfb6b4d3dea0ac5681487459f46352e399e2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.6b946095.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-eVpFT780lzoOOQxHtWr3AYQ3A17hXwNT5q8KWBakK7zk6b+9pnlIv/AWvARXm/5WCENR2CFXETUV1mPajjpLCw==","shasum":"3ef11a60307414f828042e2dad9e485ff366da2a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.6b946095.0.tgz","fileCount":16,"unpackedSize":54001,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6mRCRA9TVsSAnZWagAA0wIP/19ysJMcTghuGZU/CCle\nvMJI3CP/F4QtWWrNcGAU7UkurV7Tn8sJSvFgR2gnRuFllY4o8OIUckgdOmeb\nU1E5UlysMekeKN/1hFIPdb5g2aVVyAgu0YsoR5DKBEFeXfwhv5P5BbPQFgMq\n2GR45062/E51/WlqzXavs9GvoE2sF+OwmGwD5xsbxVO2SSW3U2iPyzPiLukM\n8wERDmQlAXJzmtFccmAZoi+rCt/3Ml7hAXCSDTFCPpNxFhFrQmPQbbUauaWj\nMRzefBLZSeGBiezVvNYe2y+cixKazEkCOEp3Ues8sRmmWk7OaFKDR0SqkMIy\n3WBoHyFMnqYFhdDKxIUE9uRmkkcAOSi3ZL/z8lOM/FrXthtoo8dchbdSXTMD\nhmrQYEezaM8Ec+MpC3DKYfEtVQ0UBoB8vU4Ty5c/ICR/gWNq3YHqIe28EaZM\nISkWueMTxgpgye4jX7qV8w19C5Yn4k/fUPnlrufL6QAq6gcohBEngHA2waOy\n20mXvS4AxPTh1kVcU0KOhI1No0APQYT3eaQ9OSsC+LmpY4xvnc6WWtq/G5hk\nrNDOM64inJ4YUUuMtS7kX7rxfnO8zWg1yIBptsyRPKDp9UP+xKgH9CiRSB5R\noAIdR8wtlO4Yipi6EqovDDsVMX6T5zUT90R3b6jWCjv3AbMWPYnoMEO2rfAj\nfWtD\r\n=7IaQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEnG5OzHVohx6PdW9cck2+6MPGHHblFf6Yo9SkBVnG2VAiEA8G97Obb4fKFU3YT68OoV4dRJ0/gYm5pfsZzxtQKZHbE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.6b946095.0_1585949073450_0.23318377259739465"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.5ccbfaa2.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.5ccbfaa2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.5ccbfaa2.0","@material/mwc-tab":"0.15.0-canary.5ccbfaa2.0","@material/mwc-tab-scroller":"0.15.0-canary.5ccbfaa2.0","@material/tab-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b20d3f13f2b61c253e28c5f9e5adf15bfe26d88c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.5ccbfaa2.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-Nb4FBiBiFSm/rbm4XOHwSOJcBRPXqe59AYABAf5yj3jN0QJgFNY6xXHx6Hs5vImV/YJvwgwzRaTmr2F8tvEQNA==","shasum":"9288657bfbc34c6ef56ee207ad7d0b107bddd2c0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.5ccbfaa2.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh6rjCRA9TVsSAnZWagAAL7gP/iKRYamusa1a87GnEh8u\n776SA/I3gZODr/igGmpr9To1e09dUV9YJDI6yhH9J20LAKjgFSc7zBDzlJQ7\npvobOFf/iD5kmR7XEzYg/m1Eo3zIcqeJ0d2qbVj+ZC6ux3s4OWjeY2V6Qo68\nx9E3NwoKNC0M44niSWP2aOAHnjF0nzZIKCbNPMn4yqBhplCcsXhH28kti++/\nDlE9Qf7tJ+NV7VABhAgCoMSAcMD+w2keMh797EIVQTDKafWM50SmP0mZgprQ\nRx4GDKHRZMvUkP4hpmvvaPfxveIuIVgtMYmS+c/SOpY+8ZW6c/5c5CUl5pBS\neD4wzF9yuz8ODuVInmT5ZQ0zGGQeeR3c9jzSE6aRT8xSe3urlOHvXvzbO9E0\nC9tTzspHQEQ70luDSyHkNKcgKKQAmfv0rCJuLn982Hv7pQlQ5dpmBNvqHbm7\n/Wbios/HciaLRpEIpuurMHVmTHGHn0PctGvoJQnU49VUU/M162cSQtk+Pkvf\ni42bnGPQMCo1v2UO51tT1kvISMc0oDHU/fkV7TbunIQ3JZDqMb4/uJi4GCWo\ntrcSS1hjHiArRtCLnaXxrAA4FHWNHF3NemcgrVvjXA7Q4DAmWUQXdATnBsbu\nqoN4yjEK6vp8DU+XOp5fDYqMTu3mL7n6sHzFCGLrXxl2IqoPk2X1OrbSAOKT\nYs99\r\n=VGak\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEoz8LRJX0ZfjrM38k3og7TynUnz0yk6vdohlWyj/Y5WAiBzO7RoXj7RzFh1KN6QGtRkjaRHLtqflc2a1xx1aP5kmw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.5ccbfaa2.0_1585949410924_0.3121200188808284"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a0ab8772.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.a0ab8772.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a0ab8772.0","@material/mwc-tab":"0.15.0-canary.a0ab8772.0","@material/mwc-tab-scroller":"0.15.0-canary.a0ab8772.0","@material/tab-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7db0e2fe222d87e1ee22c0515cbf02cad4b1cc0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.a0ab8772.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-PfQSz8pBkzClLSSNUVhS/BXpr1V4/EIQ4g/6OQyHy+6e5IuJBKJEFutOWC3EcrFpncX9hBSVzA6XYIwLaVzcug==","shasum":"578cc5947ea37206f6a5e5b4d541a720ecec4a9b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.a0ab8772.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejN3sCRA9TVsSAnZWagAADx0P/3a0myLNsAv+RBXk+wXZ\ntfK3+RVPl2rsf83JM4fM3KnegIss8peWCuYN+tnTUK7vNXzar2cYZ+rl24jT\n5XoIJzf0JgZzn/FNmhyoXqY06Jjd5JEvM4cWwqWLbEpvOGZbC2mZKPggy7S7\nmB/2Av25mAwXHyyoFItKsIzUVHzC7POQUSAzrHZSQzevGO1WZSj70iZJftAb\nvJS7FQVf5VfqeEkhVXIzsQIKBdokjmnWu0hJcR0NURAqJ+x1gflrjCTPK0bg\nYR0Za2RH0DIqc4CsgT9m4MG73UxHRt03fLA9L97R7BprZBENxthIR9MRoGjn\nANzGDVH/TyokX9h/HmC+EynsrCmzkSDmQ+xmLdwk/KwJacy6naJGRG63FwSv\n10etUzMSirxfhsagxacCGRi5rnJJxqPR35gdpnFYtwRgvkAGpvgWrWBnbvRv\ndNu86fy6jibJAkU9nxVmexnfvV9ZbIMAF7kFwDf3YXq9MUjWrS8MYiSBoB71\nSbVRwCzmbf21SaZtjG1k4w7Dt7rg7EahmiTsbyITEh/AxQE+djpmXv+v4TUv\nNez1zu7iZQMN3hdJeSR0siUv1USBI+EVAQSir8LTk8iZm6iJxibrlcT7fpLH\nGMTqomxRr+NU8ew4faZwKeGFPH222FMKvKtYHbg1m3QuqP4RndUAuj9wi/ph\nFnOs\r\n=SJ1z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlcVe8MQfV4A9N3lv7S9o3lIbEABk1Az/M0hPHb3eMEAiBj8GYffkGyli2JLz6qeGDALHvwKeSDUp2snSLjxMi+oQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.a0ab8772.0_1586290155804_0.1866139896951573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8d352305.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.8d352305.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8d352305.0","@material/mwc-tab":"0.15.0-canary.8d352305.0","@material/mwc-tab-scroller":"0.15.0-canary.8d352305.0","@material/tab-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d38e537751f3d38d903a5c7c03910a26cd301f20","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d38e537751f3d38d903a5c7c03910a26cd301f20/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.8d352305.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-B7s59M+bBsxIHgEtn1Gu2AAu2vZ7GpcjIhqUGP+kHFTxbibx1VC7P6BshL/o2fJG16onW+HicT/3nMqtCBRlWQ==","shasum":"066d2940b6260d086f45e8e1a934450950520882","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.8d352305.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPPECRA9TVsSAnZWagAAEPMP/Arwot0ys5YgDC7Tn/Ua\nDRF+XtxPIJA9IUOZHo2GALzrv3tLNIh8dE5hn7vm3BkmogfbaVx2mj3Trqmg\nOn8uoXreiafvYbIATbTWqNoqnelmaX13tue0IWtCX17zahm4ugJUnIyxMGOC\niJ+lhZsU+rn8syUMcE1GF1H3/bx6tVCkxb8ULlg6x3SGKQ2bwjY5tgA/ohcA\nG5Rik738YrEV39k8FIKCN0gNZIkBaKES13JDqnx9/MqF0PyezEAxs8bLREOy\n0XBeiqXIvZKfvGaWFNhDWc7Swu6JvABebjoCMU06rLccRU8K0MKO008g/2WI\n1wa795K9dfWcaDG2Qp4sHRB/ZJxTRaSb3GUX1qDEK3am4ifi7vKk4UgBuRGY\n0cUz8jSzl+AqtHAy2F3C0/QgBdUyjAoFWTeIUfWWNVnSXT7aAW3gLuzSbIE1\n2ZQuJyVSqGchxzXYAlz7hN3rHcuzGsI9N2qH2cFKkcxUWSqa5heF6jfuvwnW\nsXTQPyzlLskJkf90nLlVDQa2l54y9kmSe3QaKbhHfmo2ytEO0/3rqZH1fuZ+\nnJK4m/CppzGVVQJa1hreESW91LV8PFhKZMU+BnB1PNoQkQK4x1VAKXXdEbEV\nPfMBYEaaFwtEgRF7jfG8XOMxKIC3yusqhgKqnkHx3LzSUSTIuDbPPvK5xsSD\nVxX0\r\n=J1St\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFpEydG7b2Kq+Gs4YiAodeDJNaxdObse8PFgli7q8rPXAiBEPBf6uFXbwEvOGSRNnHxLWPso/R9OLMEmmfWWp/wZIA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.8d352305.0_1586295748066_0.5689090742520111"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.31eac79f.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.31eac79f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.31eac79f.0","@material/mwc-tab":"0.15.0-canary.31eac79f.0","@material/mwc-tab-scroller":"0.15.0-canary.31eac79f.0","@material/tab-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fc47d0412882f860dc7dc010657ade07c9a0215b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fc47d0412882f860dc7dc010657ade07c9a0215b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.31eac79f.0","_nodeVersion":"10.19.0","_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","dist":{"integrity":"sha512-S2HJk90qltTU3fCphFG0MiWsDcppaVjOE1KzFek5/o0VMlcoTTO8j6krHhInaAXGOYHdtAmtpCFEzQnuQTgu7w==","shasum":"96ff05094ecd78da0bcf5bab8eb3c2d785f32bf2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.31eac79f.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejPdaCRA9TVsSAnZWagAA0moP/03E5kTVd/dhXTM0/vvk\nXbmnPquzwSKwgNec/v7dM1p01v1DO1FtpmqJ+iyaG4MuYZmNm7NseHdo1zcL\nbSEcDlEEsCKjDxBIl5zja65ggIdhSvCLEI4lhQEnYXCpkuwgq8HLiaeMfmG7\nry1bpEnK50jXIXne4Dj6Nq0Z9JD70AZpplPrgF3ZWL/VK0VavdCrjPdJDcTs\npvwneXU8COO6v670PRTHzTMqpiARm08n4gurkpReLt6h1F1elw5WUlXPt01V\njeKAGr54mv7xSqfBkoudq6WVQXe9vLvMyayIdLqJX98/CgZPXBBhHd93kgfr\nuuAUJ4gCQjufuO7M9D0FZFtxhRBopXSnHnUHDbVRObsTsTEST4cGXysekCa6\nXvNNKeYaKpBBzy7p0/FfCN4J15GBK5Ua8kK0mZN8Sx8tMbqnI2j8TAiDP5iX\n1qgCznhmt5cnKzYa75YOo5xVDdMoSfgCAd52fKUjByzZG9Vu4zUTxbbgx6Oa\nl9HDCPvS/Hy3LDbk6zZ4nWIqpV9uddyy0TUHt/rp06DdQuNksAcNP/NynIUe\nMOuKmDzGmm6ogRKs/j/2I3cK8PZ0pmeqlHbrNEYHtVXz/UjF/t8rfkpgkue2\nOdMMu59sTYRhDGWpB8G5u2uE1h/1/oJpfL1EvAoM+g2+SD1mKl65UrFgltMo\nTrIi\r\n=rZTI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFSi7XrXnAKSTAB45jxvQIOy8Nhl1rBtE7MYLD0duFQhAiAdj22b4gDpz/OBTKAuiTG+jn2Xh93CaB5LMpgHrTCP5Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.31eac79f.0_1586296666506_0.8133938112764125"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ba05565e.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.ba05565e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ba05565e.0","@material/mwc-tab":"0.15.0-canary.ba05565e.0","@material/mwc-tab-scroller":"0.15.0-canary.ba05565e.0","@material/tab-bar":"=6.0.0-canary.6a40ef217.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f03dce4944b4b3fb02a1467dd03f7afc0b279a0a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f03dce4944b4b3fb02a1467dd03f7afc0b279a0a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.ba05565e.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-lSxUad5DeNJd5sJGzofJHLzf3m5K8TrOpqcNSoJ/vbSfu/1ns0OnIVn3b/jctpxKBz1kQ9ORAo1umskjJf3Tng==","shasum":"774580a8e76292bbbd0173c5b82aede0461afdae","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.ba05565e.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejgrHCRA9TVsSAnZWagAAzu4P/iNB+N2CAh2eJY/mPJmM\nBJPyDbiCCUp76B/0hkFmT58W1jeJTgnYs510lnIj4SFf2usM9gx0gk5C9SR9\n8zN6ZBElk/pN2eFxLAeD/MtDJ+hnNy4G44E0w+vM4XUr0jr8jqtLEofNNhua\nX24Aq8EEL8bP1L4Ru9JSnmN8dtcMTIgy80xFBFCf3x9pXiLk30S4hCc187sq\nF/MuahRfT7wCD1W7YzQMqx3kdnRD0NY2I9yRaiWJ8tEId/vNZ8UH12Y9PYLi\n87JQ6JYVha4pdHmsVXYoj4JemMDekwWEfTUlAZfuSAPFPtZBsNnLlOMOmT2z\ngWqhQ2kAK5sUqIJUs3r9w9NbNhct+33NRbTEPaklUzne8OJptEZ3Doo9THMn\nqIi7NAeHrxAgQzpEgaM8upnjAr9ndBbcs89eWqSWSd/B6wMBxCADhED2rieM\nTNC2IaSUnL3yqpHtykibpIKi5nPuBpizpK4QwSe2FK25zlQ9mf6pL3h5kBSY\nnD63LjRpTbHj6F2fjXRLDcxBN6y0YrqFrANWaAqBAUDM7DRl8t5LzSno7qth\n2604sErEuN6QxDmkt6eUvBHzu8PWr74U09r2OCoEPPWOWBArtGfrW+4yTP9u\nZrSwCEoDK7ssb8Gblr7KBu3nKVzVjZemN4bGFHuK2JLRG/8nO88piTU0cf8u\njItL\r\n=CZyw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGrQjLS3JYkZ/RxEfW9SMHbL3H18pbNT2dtEJ1mun0HAAiEA0SFDOWHM9NfcVM/TIhFiE7WlMWOR4c7eDbRQb2dkMrI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.ba05565e.0_1586367174825_0.15797541570987694"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.25099f79.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.25099f79.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.25099f79.0","@material/mwc-tab":"0.15.0-canary.25099f79.0","@material/mwc-tab-scroller":"0.15.0-canary.25099f79.0","@material/tab-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d2069c5f3f79653f2526d8fcca853faca1f2cba0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d2069c5f3f79653f2526d8fcca853faca1f2cba0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.25099f79.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-Doc/HqNteDEGGg+ogzErJQ1Xas31HPZTB310o4lPHTderZTY28BvBT5Xd5rsr6UN7Jb+vM1oy71o+Xg8PA7cfA==","shasum":"1b998e4934d6b40a55043c39bbb6c6fa9bcb8618","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.25099f79.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejkKXCRA9TVsSAnZWagAAtV8QAKLzOSO+YRZ4n+hdgtCi\nuwt294X3M16AeNZ4EAhSTMyLx83uuCU7biqg3FzNvFPC+RBpTOfTtySDOQYL\nO7H76auJC/RrJiCCEc5sFe6Pfz1XykXOrYSelTfx0l6vQ9ecVlAdNLVyf/9v\niC6EX6zaK/Pc4MkJ4jV0hBX3AeMWjNy0sFq8wMouFvcotK3Usr+PWyg9i86W\nsPyZkFeZVj1JO9XNtaZEPtq7owZHY1DubNJb7WRV7xozo8vSK3utU+6g1tn2\n3DnXy/M9NT+QiDCLJfAAbyjVnTWjM//+Cs7ODRmgCQq3Vrgiepn04bkzZtg1\nk38LqK97r5bYovqwjASgAOO4+iL6X3/x5JILeG2heEJd72fjDbBAFcnPeI8k\n6HlaArmGJbOBXGemypxl4EC54WVdd2S4wwHUCBmYbZldfQqrRXRJcQLiD/Mm\nT8DLCt1AndvII3fxBZ7u0WNbzhSmBHr0m63Q5ytd0EJMNDjwPvZ93c0ZZ2x/\n16BnLGqKwnbGSIRZZQTi4Iz39vIO7lazhFza/JNzS5fOtPZl14cNUsX39hdi\nf4CgIwhoJTFLt8JII4QNaTGdWyZMUdeZXcvw47F9IdOHdRRLSwjWG9kzyX+c\n9IwQpQsyH4j1xW8xk1bJTh/6cpNC+lYdqutXJLI0SXgDAOc9UypQ6cf1Fv+6\nMBs8\r\n=XxKV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/TUmGFq4RkutDSMMeTOSLbMOVI1clyLY3vexGKhgYHAiBkdlNIhLohA2krTXC09aJ2Pvd9BXlR5iOOuzqDZz55Mw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.25099f79.0_1586381463058_0.881584237114178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.447e31c6.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.447e31c6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.447e31c6.0","@material/mwc-tab":"0.15.0-canary.447e31c6.0","@material/mwc-tab-scroller":"0.15.0-canary.447e31c6.0","@material/tab-bar":"=6.0.0-canary.9930d9cc5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"948dcd3d057312750fa0c58715c74d5ae576abb4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/948dcd3d057312750fa0c58715c74d5ae576abb4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.447e31c6.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-U8LVUkz18/6+uOgf73qhxTUdsA1EtD6NDGui8eOsXFkHNW89rTePuYrVtlvhE6vqOT6hQ2s7goDfQoACnGkl7w==","shasum":"4fac86aaf1af0080faae7e51dde75884bee3deb2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.447e31c6.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejneICRA9TVsSAnZWagAAzYAP/2JotknHXnZF3VcabHGN\nogQjqaExzpmO2PKGy0yC4zaTFV7Skjl1OJUZyDRLAenoes4bmB0GJ11nBsxN\nIcs0KVVbA+omQXgLMc7uhUaTxZv5i4B2w1ZB8aXjRQ2Jjr9R6VwVujVb2n7S\nisGeRZpA5EHXPLvriWuJtxfomunPc4fs+Qr17/RWWaRriZL79wZK0NHNmwko\nuatjAbMUWTW+CK7hXVkppCJMqskw4ImD3phSrixH76GTYgOPtZdK508S9dNP\nDzqVNnzZjhchK443r+4CIe6NQbCbnjnefEVoXQL/+O87whnzLaZspNYn0XtA\nalcySrJSLUP09V3CcNdAHOEAAD3ANX2w7vDXUCcOa5MOOKqEmj7rtWNoAXSN\nrHOzvG0tmqlUrglO+tiZCU27P8zw4eCl1rnnNvNFUm4joZypXNNTAqAdairO\nnZnGW4Vnmxb0qKnigQ6ldR/xw3Vke4uxN4uQBovNA6G/59V/CiBk4hVRUN8J\nJYHu9Jb1nBbZILFkdHYjfAYeGeE5Sdfrksuk/3HmxotqiTpP4xO5j653arnD\nge15A6Regna6BXAx/YrMOmVvktQp1XnDOX0ooslrYEykh537u3ixf5xM6U1p\n91/ewA8QKOh3eXl3r4f96dXVdTtlExlxC2/0KFTAZq+ylaep+CCQSYT6Ty5N\nz09k\r\n=ma/L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKgAJGxlB8Q5n+gBOCH7VE7CzSj8TIp5/lUaySQQtylgIhAKkLWYIlvj72rWNOpeACl5jJ2TwAQhgvip34dUf4MFI8"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.447e31c6.0_1586395015829_0.5590227837580799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d6dd84f7.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.d6dd84f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d6dd84f7.0","@material/mwc-tab":"0.15.0-canary.d6dd84f7.0","@material/mwc-tab-scroller":"0.15.0-canary.d6dd84f7.0","@material/tab-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"74f8e8617851a447758cb395b1e8bd3bf4c8c323","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/74f8e8617851a447758cb395b1e8bd3bf4c8c323/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.d6dd84f7.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-kb3jCrOsLAKZ6EyYYZupNYcbXViQXKrGbhDuARYkEq63MWXWR8OvtJklTB6TIQz16nSI79dcGN3HQLOw+j6jnw==","shasum":"b431d1b10f4b6e4a5b97a6e60683bf89aa3b7d3c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.d6dd84f7.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnmKCRA9TVsSAnZWagAA5QgP/Rjgd9n1ahZQuWmejnhE\nqbnhM4HQR0BcDqwxaM23lIVIJHVvaDnl5mNJ/LnzY7r83EFDmVgtw6kI26x6\n8BDvAgKRtO5kDENt47k72WVQJJ2hMgzsnhe9CLFmkljeON7JvLcrITenjUBY\noMzjjN/kwqD7Nsd0IyKfZZDOcz78caULGscHPzeSxrb2/ZmXRCF8kLHbjjug\nVGwviTZMtC1kWZo6xB3cBbVQyFuXkwkpQTcFpu5eUsJ+yxYTUGY3t1TQhivQ\nIun9U20BV+EAkIcfPIPgqfRmnnkU7OZvBUhr4yIYodImaw3BGUGZa1C68J/c\np4HXtmyAKG0edqKIe4fMPFtX2y6bDmNXoTXrN+I8PiLMkL/jVGWbS1GCyJeu\nlaqVsFVQ77O9HlXa6QspmdggBgahWhLaXdYBVGgU2hjqI2EFbN8L9onUNCmP\n+cepz0vh11xKQuy1SCu2g9HomCS9UrG+tKsF8MwaROB4gRgXuACoACMPGO8/\n1JJ/O5dKbmg5MV+EssGNrUyBi9dEhcy5jN16dR0iBXFWE0ZzoScZoSodZsBw\nI/cbCnqbd8rY5tZ/JkGwI1Gjtv2q/xmxdAkv/srBWyMB+UIxfF2aZWqNk2SI\nTog7+nE/iY7exK2X9DLMVs5inrp3RuAF4PjTn31TYV0XCqGcbd7/N7wSXKC3\nhCPo\r\n=jnfJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE5ygeNteq8gtmzsLHJEtgXHU9i1icGhjwSurciCaJ5AAiAnTTE2nPgZ6HFWp3FtVpW1PIZjjh3qcUkhPhsnE1u/0Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.d6dd84f7.0_1586395530097_0.5293265205314137"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9b03ee68.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9b03ee68.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9b03ee68.0","@material/mwc-tab":"0.15.0-canary.9b03ee68.0","@material/mwc-tab-scroller":"0.15.0-canary.9b03ee68.0","@material/tab-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ab8e352b8af06379b151d5a80b316fcdfd6e2024","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab8e352b8af06379b151d5a80b316fcdfd6e2024/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9b03ee68.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-lQww6eqaiuD8MquVhrd5wvoosiCGWgcc5sn13NeiqqgOpSS7XOCiNeinSLkEGMRfBjSFHZTYYFgW0ROu/ykFrg==","shasum":"0651d61eaf6a834dfbc9d4d6af3483e4c22ab155","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9b03ee68.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej3+BCRA9TVsSAnZWagAAIlcP/RIY0yFzez3xN3rm+z0k\nKH6rZSFSY8TrRv/4UvL2kyF/rSbcEeNZgXrD2pQBa7SN2faS1sKQ20vEIpw/\ncQ2fWG9+DPjvqObJmYNuEWC9vNI9f4Y3QgsjJ0HpycnBFUUSQo0N8jgfFcTx\nUF2QkMetGKAySKIJ95OYG0dSqVwhUgKY63kmxJqlfmPcYil1uwX1Nn9XCqwH\nFNU0l7XK7T/MwaoKzxiFVRApZ0pqlSLLiA3JMiqQ4gnkfHHzg0JJbS1M0W8Y\nXVz331sYAGxHhhMuJTMUv4Q2I/CgTfZvDmdiLqHDa6RDGd5+r4NQ5ELOxUQ+\nDJZBI16dbao9PB/A547k4NdbKA+KeZtc4UnTiOXauEHK9K0lHYv6My0cvC8i\nRJ3fPElYxEYWJtutTaf6Aam2SZO2Ulg8nD/EaasQ6bUs+Tp3MBO9qc0XZdEF\n0xD8oiGWtlES3sWwn94iEP7dUYLySElJuAZz8KKpp6AeszypZaFm99dKEuSz\nTIOCCqryr+bBE/WoBEUo+Sq6RgL8u8FYEDr++7dXEmQQMDzI5FnqZ5rIgAuD\nnMZpWSrbg7QpvsAphaO28U/tGd8oKgTvtnD/GGNxbFJuxeed9W7fLaR2Ek/m\nmSvczO/Ao2mB6R4mUC3j6bKy5CJ9A9//BB1z1DFQ8feQpeoIuQOp0a9d9gmA\nFdIa\r\n=J12C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB6FPW+IdHj8vFO302wrD4qrXh3xIjwafOJnTVLE/0fgAiBU9IHStRLUrxFG/6hccwUrwldevi4HsUmmS0h24tSmHw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9b03ee68.0_1586462592586_0.988526861826496"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bbc25b10.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.bbc25b10.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bbc25b10.0","@material/mwc-tab":"0.15.0-canary.bbc25b10.0","@material/mwc-tab-scroller":"0.15.0-canary.bbc25b10.0","@material/tab-bar":"=6.0.0-canary.05f5e1583.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a56f18fee2a99903e5867ab91175e4802a21cad0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a56f18fee2a99903e5867ab91175e4802a21cad0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.bbc25b10.0","_nodeVersion":"10.20.0","_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","dist":{"integrity":"sha512-De7nf3btD8MHeBLwdu1nfenJigAN3p10//EignxPt7Ng5Fe2uX/9x68vsSLtPUTAe84UVmHHFZtW81KbFaN5EQ==","shasum":"a4c5e96c235678b5fb97643cb83217ae762334de","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.bbc25b10.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekPcqCRA9TVsSAnZWagAAe0AP+QCq0hPBL3IJzpWEQ9mx\nMThOyanL9p3rIEumSfHGGeVnYmq4yD8IFO+lJeVgcDcBoEz5U4JIs4dbYpMH\nZZr7EZLZ27bk5nob6GHZdLbPU+6jYts4rQXUVDFGj3L8Qts10g7k7kNuX9V+\n4jKTOzKrzjUCgy8UAKjG1xSAIVRK2riKOZjH7Zt2l9T9cIhYGFvX235xG7Ed\n3ANy/sgLWdYCND8RcRsYCr406pDCCzKn05aDkz8kkXxZH4IgW5lzQC6QgQFb\noIAQUSZHF456kYmPcs3o7Tz6he3IdptUi2n3mLTMjUm65oh6rsvhUSaEJGxT\noKgyt0AzS4AgWoHTZKdKYui3zbFBdNnodn71Vvfd72EjzDFyCPlLH00uHaGm\nVS+CKVLYMRdre1pGZU05hwp+FQOIHkYYMF5t9wX/Owiu/oC6133PYf9Bku4y\nGgJDeyRG98dHwZrL8rWswyr1Ug/4DTelkaIcFPPoC0KArh7kq3PMa1KW968l\njj+joThUOXakPvhc9pf2iG47g76PwJO53Ow22DXU81l0DoSXXVbwSdv3IB7e\nR9hoF1UBKGB81hV6MhLYAFmiqDOeJgMg4ioAQJqn96YkbzeApQh5nengNEh5\nhEJP9K9yOYbTw3SOtebJHdhcO7fiHUxhpIUMSsbuCxsuEGTmapuSIrS+Vo4H\n81rC\r\n=9M4d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL4RjbNmbXGtAXKfyu1fG50p/1DC10Q1icFw+CYVEq+QIgVNFJPcO2+nh2F0KtcSCTJo9n0k6WkM4l12ejCrAPCDw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.bbc25b10.0_1586558762092_0.39674959209394167"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.339cbfd4.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.339cbfd4.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.339cbfd4.0","@material/mwc-tab":"0.15.0-canary.339cbfd4.0","@material/mwc-tab-scroller":"0.15.0-canary.339cbfd4.0","@material/tab-bar":"=6.0.0-canary.f172b0f90.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2a2c6f2ad1cc09cfc8d0cb5796203324564f76/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.339cbfd4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VGTUoP2rbpT3WOB7dEMxPnXcjIQgTXxcfz5cWk2WnoDo+v68+jQ49UWdOfhHWr1iBpjhMi05yZDvyVRt76zKVQ==","shasum":"4a2b83c06354bde7299e7dcdefc1a9e23f0f0c61","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.339cbfd4.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel0a5CRA9TVsSAnZWagAAZb0QAIga3h0TlrpXcd9ckOIW\nxVexoXVVDCiOoXg1hvPocl7v43hN9l+HFVGgwo93oeHRaYODzTSFJt7XV+HU\ng/oSo14w4XJkrdl6JD9zywwhARdl9bnqhE7f8pTnOIxDWLqneR+XM3kdduip\n9cl3yQ3pYDU1aQCh/yDkRkfW48G3dVNUJOEGuIv4s3GYyUzvn9MqYDxWWh8q\n5M9fxHbZqXoMzSBJZhdCOVoaLIwb72O+kCSgQAuz4AFpcm/h4jlhi2mfsRxu\nMBz9OwNMDVwsEZA2iph/fdpvyY+pAKTUsawZNmr8c9FJECYZkOOXjv2UZ6Fv\n8EzAn4Sj8QUIQjjOgMeF4y+t8j0qZJCM4vgLMsgslIJaumA0ATNKarmZQkFL\nV/ilsTgT8vr2pMgxGyE03E9qdviU6xt1A8gOH1YIQjzzDAaTal2YhrkwsOFQ\ngnxevJ4Z6IRr/wE2rqwhMOjm6sQbaE+1dHx4fdnMpTi+0KynKauH79OcaqPx\nqqbRrRqMXxMEKi67BWC/TFS5miJm4CiijAqaN6WnaNvrHsHqe4iEexDr7VvZ\nVcdacWA6ReK7zq3YTumQlA2zp4z0E27mG9zzaMHWOqj8XVKkHLcjYcjtaRso\n330/dKbiKN31VCycY100cGRQVY7eLc0xy/OK4aPPPF7ujr7Htm3Aup6zq31+\nXImM\r\n=++aB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBjMmwHLxncOefhaYKk0Y3VC8ygPV/98pyH+o68pkxS5AiEA38bNqVk30SyQDHafQ8r9OT19IMdYNBRsMWJODtcX2Us="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.339cbfd4.0_1586972345125_0.10630898662983479"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b74ff19f.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.b74ff19f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b74ff19f.0","@material/mwc-tab":"0.15.0-canary.b74ff19f.0","@material/mwc-tab-scroller":"0.15.0-canary.b74ff19f.0","@material/tab-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4a8d0d2eb87a0979a2039ae68ccef8af0c8b7b48/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.b74ff19f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Sjy73wzMFbQjVQDleKqUXbMuW8G+6WRYfBPAJCMDw+Qk7LysT1oHbvpA6ptt1wUiZbfaLQ0dMx6Pqe6gS+mvcg==","shasum":"b6eecab58349e2b61814de0cf6c3ece1fa8755df","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.b74ff19f.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel2jeCRA9TVsSAnZWagAA7jMP/1PA8tdLfrOy8aqHdRZ8\n8y6OnaCgNHYVDhl999i3EKQqqxAYkeCuoYG2dvUPK78qclnMPZArFSKY8vdh\nheRAhw/K+3IE7ff2nS1jwT/rMizHmemSz39Atn1o9gmrv/k+u7CmHsBUCxbh\n79tycPiMJeykrBim0fOWfT2Tz+IjcS6n77xs7KfWWeOfwtkcxK+eaqNvETOc\nDceMgw+HiVy54ohyxKVm7CGrgEzcytR1uyv7WKdSwYCU43H4dOVelHpXfqh3\n6Jz6D24YEWIh1Xc92+ZErtHrpsxkduG/9BS5ZTuWqVRWJ1S8IjxRvmv4vu8V\nb8g6vIcV4porQDt03ap7Do1tisT2PV1wbtk0+XpX3LUwETJ97xNA4W53OqnC\nyBVUKI7wVXeoVpaxYjI6OFr17RaR/Nx+xsenVTaA/HzyYHFWlAVTKGfjaT32\nyP3gfJ9B3kQZYpGsEwnJupjonQfISGGkm2yEUw6HQP8C4ItqvQIw8xKnP0DA\nDItReL76GJNiJUQSDigYzTMpTy/RhFUaqCV/v1zuBvdi3OIndHDPMXcEwN/l\nIn/9AxB8k2SpPdAS/g63kj9U8dJY2mMkdFh/mhLqqa2OA3Cgi+bGapyo16X8\nkmPPZLigPhwxD+TFS2Q4XLooLisfhg0kMo3C97xmlpc9WtsmyINxwPaIDeAz\ntTXs\r\n=KJTM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDJD66YitryEMJLw9cCjy/yBnGdGdwBjB7r1QRdUdYIwIgfxnuOpEzElQAFNRA1mQPwDpLTlJ9cmU8S8EUSTvE6Ms="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.b74ff19f.0_1586981086441_0.12801779327505547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.aaa16853.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.aaa16853.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.aaa16853.0","@material/mwc-tab":"0.15.0-canary.aaa16853.0","@material/mwc-tab-scroller":"0.15.0-canary.aaa16853.0","@material/tab-bar":"=6.0.0-canary.c02642273.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7546404b77983a36ca5e25efc1078681498f260b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7546404b77983a36ca5e25efc1078681498f260b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.aaa16853.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0Ango2Z9lYhdSgRNxzZNSK8pao/DJ/gMubGcnCupHSAzXqElcHn9vekBYMSZji068LSeboGQDidgRKKc4asuTw==","shasum":"b55ed0d9f539470bf9a423dcd4b79d87ed704e9b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.aaa16853.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel42TCRA9TVsSAnZWagAAcZYP/2ab2/yfONcaKuZkahh0\njjB53Jt+KO0DhZCX1qLjxv/D4aftZhg1de14BEZo6ZDOHjQ8Wqkjeg47+smp\n39WOXhs5/JhtZDEjjwYHH6E3mzKtk/zCwEjDpzbmV8l2iRpN8Zkz+z/wbgim\nSTAcG+pFoOFSQEHXKnOSduxGde/PqLsc+MESWafHHvLsjMiiBh9ZDxl+WyAM\nI6GyBOc5cXSMQxQ2YwrE4p9iOfOCs33LaosF4jZLlgozQsjfg5ABJS02i96N\nvbva8bnNLA0wzkQLLqR6X+KJusZBhvFeCvHbrn5CMSWTv85oU09pQUpvR6b5\np/QLgVFK6BjL0uwLTf9N+aFsQHXLA9BU4lXbqy/dpnQ+sVu51ElVsZfclb17\n80VAo2RtX460EtJYJLMmCaC+3cuOa3jASbR5EF6GDjXoH3zpylg4j4vvw53p\n4KUo5fbgES+jnzi46AdW7z0cYPBDVS1HXs/tZhvbby9wMqxzo1+yL9cfedQX\nhIknzIFvMyK9nxVa8w1xpE0l2aIaMn3f7w3ZSQ7tFoUBcoIDLLPb7u4iec+U\nkw/jDqIwrdA+8Gj8c3ldtLvUPhDPoc5qJS+FgE4MUwH9dtxRaBcsQFXXaBwA\nNi8ZcIywBVhst4obdrjYEmrPX4U785noaUv0xdyJfoXbkQ/w9Qv0YqBF2pQH\nHBs0\r\n=eAf1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDsF9OdWpwZ+yw0+omqW+QnGcI6gpVcQaZIf+dMGtspiAiBk+C4LVAwuzmZC0SSQlGfWfIBKxQKxu9GCA0o9cuiUug=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.aaa16853.0_1586990482315_0.4566240013141454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.826b23e7.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.826b23e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.826b23e7.0","@material/mwc-tab":"0.15.0-canary.826b23e7.0","@material/mwc-tab-scroller":"0.15.0-canary.826b23e7.0","@material/tab-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00403df32c75dc9e2a64a38be1eb1df45ecc57ff","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00403df32c75dc9e2a64a38be1eb1df45ecc57ff/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.826b23e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-BQGtd2XjeOlQVMLB3MMf5B3JOljcDSVwLkWGq4mOWZ827e3JKusLXJs/lQAAzEsdQK5y5/c1LjuuXoHWdvkduA==","shasum":"14b4cdd5ddf02a46a0b33f3e01f2ce27f2fccda1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.826b23e7.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKqbCRA9TVsSAnZWagAAlFwP/jShIx+AOvcDtYPwIpOF\nqoRXF09aDEQBaKLiqfhSuYFyRKvUsvLsO5BwyuVbrlnVSRo0S/AtY9zfDGgJ\noZn6NO71QkNlYF23OCHzMEDZKmoqr/B0ZOpejKas3MmrFASrWjGAeGhJXFs0\n9Thwa0pwG8tJzYJSG3sy4QtiWTEMTMJgHiJds8G4/0GtucMri5el17ENgDcG\noj2CbxsZAaJjd8i/9+GJRsnhU4WoltAOQ12OiYT5C46Fku2ISarRrcFMRjrS\nPj2dFb3xoi6FTuA8cL9KY05Idr3a3bGRNbbTAmcMsjsOi3b1WTQ12Zvb4vsG\ny0ePQo6eTbrh6xrUGroFsyykvK4Dzm0Tlb00KHoVHz5kS+lwUm6YNG7dR/l5\nOmlnVE9fL2Zn+FZFSPSXTag5I8UCvnxBD5i4BmKDF0gXjCBd119eM9fmvnA6\noebv6LNQXziY3GCn3TWXV1glxNehNU080JlWQvDXEy+mT0/FfIbYtK+rk7pH\nfB88ELalSmGVKCNNHEACnxn/a1mxV2DGgDWVM+H7GnQni7o6zmSF2S35KL5l\nv0qjjxSXddmRaBd7QQwEBLhk4wWTinSE7BHY4yYXHoLGX7SHhzDmk4LEDwVk\neusxzdeQ62VOic0jsE4YCT5r5LI9+tBec5JPl2miiOOHvZFCTs+jyXZphs7z\nF6NK\r\n=hbu6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDobTEVE8kbR8PI+8GnXGEnt14FKthk62ZyD/F8c9+nVwIgJCz/GN/6aewmpYXty/uJiuvUQWiv2l/QDabUkE610oU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.826b23e7.0_1587063451404_0.6884237770879988"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e1ad2b2f.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.e1ad2b2f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e1ad2b2f.0","@material/mwc-tab":"0.15.0-canary.e1ad2b2f.0","@material/mwc-tab-scroller":"0.15.0-canary.e1ad2b2f.0","@material/tab-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"148a509de33ca1ac17781a9e24bf8735ec5b2874","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/148a509de33ca1ac17781a9e24bf8735ec5b2874/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.e1ad2b2f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-4XHaak0XCoWOUolll7mOy5wws6J09lmCRJV9SUFi0PolXRtAdBheBe73gRRrHt5Cjm8Zx0dpUonAD6L6gKO3og==","shasum":"542bac927103bc4b0c1c8a796a88416430304ec2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.e1ad2b2f.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjVeCRA9TVsSAnZWagAAh34P/3bS+GX+C5cc8DyV/9B7\nAIHS4yQSkbWHFQKOXXYF5Ye/6RjKxIYdf1r04ZW3GVlBfiPiaBLCiqcfjNuM\nlRlrAkwdYqabwfjC6C2+oqtQAv37NlVbjPLFKeCdxgmYvN8qHmCEbUsOM1uj\nNTCx5Jj8PlLTzNb8HJGPuHPTOfkzv7ARMs16YuPQEiaZ4LX8SNv6hwjrN8h6\nB2m8cdhvDeNI0Jag7Q6EkFfWuIIrwzZsNuCwpXKFGW34PytoXXflerPErNSO\n8LjW6lAUf2+Dl4+lD9Y+LIr+23sVUcDEtUTXry7VbkZKV4Qehwo5+DFGpgFR\n1d5hgIqv7UqFGS+i4ATVJmT9JVlY99KKbcoxaoceTA0UUkh/P6MoQh2XBaxV\ncnVtQKJ8HjrU3jwBCf6mg8hh5jjBiYAAqf1sOE8HqKpS7k3oIQoCg6ErBfh6\nj+SQ1hoYHq+Xg2LHTQkhZniV9QcC/LsyHYtgu1tB22+dsxKHody+1CayZTIi\nnb4Fu5XiNESlNJELYRh2fiowYHErWE397TQu+9HBDYxE49zZr9eA1M6lOTPp\n+C3ZSbI44znqLEYTn+VmuH4YCjhjzOSeBpnAtPdmrdsrnTVKejORx2Lsc2Z6\nOfFc+4wcJS8rkYjN+cH3WWfOtF86flobRKso6JZjBqZXYB0n13RAbImUq9/m\n/BAs\r\n=DVK2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDopmor9W/d5hUIzV9xwNLkPNgsaIYNHBzR+FnVQjX+dwIgGMeWv37b6VpLDiimPNZqc2uo38EdZVWBM/rInZrGqkc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.e1ad2b2f.0_1587164510157_0.12448451172255615"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.bade5580.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.bade5580.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.bade5580.0","@material/mwc-tab":"0.15.0-canary.bade5580.0","@material/mwc-tab-scroller":"0.15.0-canary.bade5580.0","@material/tab-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e463a20777b8cff5146a68db7bffe3f5aa9674d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e463a20777b8cff5146a68db7bffe3f5aa9674d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.bade5580.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6fK4RnPD+QSAUPhTVeYS/ZwQT8jIfDOS5rfYZy711IFcMtzREaHrVDDAacrQvfTOcpyizGXE2P3RijYkXXyGzg==","shasum":"3951536f511b17cd31fefc743815d4c68e7654ea","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.bade5580.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjmKCRA9TVsSAnZWagAAbb8QAIwQeI3PWskmcdpQ16Vg\n6ZfhC2sp3/zkSj66O/P/mwshg+TrR2ooUGjW02ArBwVnrsscG9WlGnXKITOk\nsrtazVNSLT0r9okLVVkuwKIRCWF3e66BMpPGYneDlINMKo2TnT5TCTPs/YJ/\n52Xkc0Wl+vLdqukGZ1sdXpTytL1C6f3N+yDCB2kIIVf+ODLXsARPnkRI+oLN\nK+kKitFafC5VRrV99twmhvV4u+Y69DsZi4zD3fOLk89tal0wOjswO390bJFj\nF+q3YmwGlKMX5V54D/4dIb8wolxvt5Q/6BbKmYgS8rIP7pQqzXMl32D//j3/\nmnQE2BVDeaDx6j8iyGGEcDPnlXoa+ATrjq8Rt0YY64xpx5AO0cN1EKDhIlDb\nSzZcxITPpkAD4PZgY2/UM2hDX8XTt/Ww3Z8PZOj3YkDD0GNnKEtBzpgQqrh8\nG8rS09gNUvWxmFCOWV7ztuGA3nciOppEQ9dzeON9dDCzU92kDFzD9eIkXcdC\n9b3QbKqwUXvpTr9Z2aDMYlndJ80MhJXhjB3eKxqXKe1YHAggtvBNcZO7OOmx\nmPVSqcnbuLcw4jsfpYBkooNrc6n6px3XlSBjJkwImsatewFq6+605B6twc9g\nj48qaFPQG1QrnOJPiMU+Acs0GCpLV3iRAcezFOX/0u/mytn0WB88JRouFEao\n4KQo\r\n=KtDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEx8Sy/500fGszr9n/Ffo93nHOsmXRSXrIbPzDAH9I5gIgYiki534qU9QbJ6/Gs1lH96tC03LAB1qWhdKHExD9vk8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.bade5580.0_1587165578128_0.9365634147659581"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dae38247.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.dae38247.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dae38247.0","@material/mwc-tab":"0.15.0-canary.dae38247.0","@material/mwc-tab-scroller":"0.15.0-canary.dae38247.0","@material/tab-bar":"=6.0.0-canary.ce6cb7024.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b704c816f10599ee9a5d9b89a55d9c95d2e36f4e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b704c816f10599ee9a5d9b89a55d9c95d2e36f4e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.dae38247.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HSO0K4LEBtQ2DE7WNJNY9P5pk9714ExXV4wQzTvFIQux7lbkTP1FRcDzULVkeLS2Zi/VYAWu/sbzYBmw7UVLjA==","shasum":"f7c6cbe75fdd42023560a3bdb695d873c007c78e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.dae38247.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkbfCRA9TVsSAnZWagAAmc4P/1bhI+3yEz/F/WKYnthd\nfuIvX6dOs5ABvVIOqrEXYMf54FKyjNYfmX3bdsfDv3x/CvlK79IBnIg/+HFF\nSed2m8KjZpR4KEZ0bFSdhlUHrbSchUBK6NlKu8ysJMEkd2OxAogJfHDRBNgE\nFzNffgUrBlF0Nln+nYvBZVpZfcIyah4KIjtJDoc1bCcL+PVXEwx6XKEXzZ03\n+dhwK02k7yVN5oRy4RTPtP7mGjQX7HWYkimgU5R7nwQ7MpQvP5BxWf1QwyIz\nFNX6T30BCdoicfQB2Fo56Ed/0k/+2A7AGhfB8M7YNghyx0VTcPjS/PZjYLyf\nyl/BXxIKWdCJQojkjToIaPdEG3P6uUbTUCc0jtJ71jK1q1z3bBkhy5tE/fxi\nMWUksPieYG5MkqRGbtFWJPIIUlMxNoZdx50Bhcxe0O7jlANX8owPJjL6QlQo\nenwftMDGUQNUycyoCaaKXrHCO6AUsuhA9x9/Lxs+5a3Kl/bywo7yxmjsdXgD\n/NR02UfE9zEE/AGlMW0qC7Sa+sZ1M8pdfcBril+3XEanHsqo9VswX0XU18RJ\n+xk+vvWfAGGkg4fvV4U0no8nKbxBewN3U7g+Ll8bLe2TDTh7xSE19rqiL/Pr\nnx7S/r4sdw2VSwDc2yFO8TeUJoED60l7AVgklsv1JzZrubXCceYqx91jcSMX\nSjVt\r\n=olQn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+8CJmTbLulsDRC3otQNqEzXQ8dfcovGdnXSlybdxpNAiEAhNnVkcr7cfosgUXI1JFVkuZpZIOtJVT7ptDQ3eylRCs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.dae38247.0_1587168991216_0.4860770536247623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.a04c0b82.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.a04c0b82.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.a04c0b82.0","@material/mwc-tab":"0.15.0-canary.a04c0b82.0","@material/mwc-tab-scroller":"0.15.0-canary.a04c0b82.0","@material/tab-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"23904437ed2cd67305827b08d512e6dd06858b16","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23904437ed2cd67305827b08d512e6dd06858b16/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.a04c0b82.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-loFmwFRWhMWieHQ6sc6tmQidxZelYFKRrGGejQDLoEjcV/KqQxTurTBGZMcaj/De2D4+a+Ck86S8oJgTus84Yg==","shasum":"74dbfd2955c7cca383b89efc06c404b939b08e56","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.a04c0b82.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemksgCRA9TVsSAnZWagAAn9wP/3Unnu0BSPIuMMoA3WBS\nNG7lo80YmH7t/fFLj/2oqq5qrgW60jYZ+Am4qyZBp5CEDfT5gyWZrQ5v/q6z\n0k7Pj+ymCDnRzKBzekw12XM1OTmbX/ilz9b8MI8B6bxU2Dlr2EMq2jJcbeCN\nzIsqrG8+GRRqbJ0+xA+571io7BrH/RRqis0neaLBduDVubIBrq1Fp/x0FDJn\nHDbL9uUYRHDbSafmC/otOjtdxYozt12YkDhP5iuCVzTtOOY2iQ0SXrALuFcw\nbHgwCT3ObhBDbUogbWMStoRUsCEl0ccvkte5o8OfJaISkz2WAbekzZxafmZ/\n2gNsrErzJLpbcpbTWaFBHw/c/DjbJaS+86ur0RDW75h7n+Q7DbHhOIpyr5nO\niT95lGqBTxfCm2OZC2tkcsMZYg7wDEB/NvQSjsG8NkCDAjlw1G0vDUy0xsO1\n5uTbd9W1wPbP7/Vz2XKwn2SvZ2cu9IWQYn9hMQtU7BskkHwWxWYdOJm0lekH\n0P0K/x+iZYxS45ZHw5ONJ0Um8HqHnm7G1W2NFg9fUqtnD2e8H08/kGoGvMSK\naQVw/Bl9SkAeIsH9apx9GOEEdrJvXh5qdoXa479WnT2HZc1B603FXLbEJmsi\nBp+/kqI3sxm4cLneXxQ0iUWjKX/8chVaRGAdlO1zJNlRbat5M7Jk99gAYPYx\nusr1\r\n=/1RS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvLUaUOhDyXYbPMS18zgTvtjhTYRLSwYk51/aJft3kjgIhAPxennt0Kxs3YRc7tq96sjDJnRdZYVlF/aDkocnJx6Ks"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.a04c0b82.0_1587170080408_0.5594783301396458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.715decfe.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.715decfe.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.715decfe.0","@material/mwc-tab":"0.15.0-canary.715decfe.0","@material/mwc-tab-scroller":"0.15.0-canary.715decfe.0","@material/tab-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddba034f53f308afea3b1390f775b49e8a473e91","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddba034f53f308afea3b1390f775b49e8a473e91/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.715decfe.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-E2AGNU7KEwyX2AIcxukmnRnMmlx9iJpqhpJ7MsaLxVJ9qB2wFgyq2bH3GDFfelC9FpqThoyxX5zOoj0+Ju26ng==","shasum":"f7654d19d9147c35a26297d1e54d0f9826d61d5f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.715decfe.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeneuHCRA9TVsSAnZWagAAffcP/3jsm1+25QPzDvQ2GiYT\n6PwbhrsxNMrjOj+pAc9W2xm5dtp0qTlujlrshzMZi8Tktjk/edtkt6OrAFkK\neLXfSxYhtZ+4037l1vb1CASiLZHS9KIWKwpMSM59kr0oIoW8vRmenNDqc8a6\nzvCcQ9fQXftuvVJsaPRDilQlU+sB97Y7Sq0NC/55Ao8dVJAHp49CA8XWjU6M\nZ84fpkDLew/WwssiQWuSxrF2vWeyYBOvxLpMHHF8PCk2CTEifQC2boZ/4EWA\nfN/U9NpF0vcimn3CauBG2f+p7Eyz5b4xwl4ljGsCo8Fcueb1aS6QfRJk6485\nxuIN9aNoQfRAgDU6HyOHiXxnK0Cgkmf3aG392RCKuUh6NT24aZHw8rSm+m4x\neZ1dziqbn86Dy8BCbnWOgfYKKM+KxOuj6vqwc+Aid3esc3p2EdPYs1Yh4lsc\nDcP+o7WrYpps0eHVZ7zOLHa0CMZiJduHBT58aLozqoWw3f0D28n8ijWPA2Iu\nSlr9OFkQHRfBmsWMlL7cpu9WJp/2T08YahpEroykpHKpQK6GJBVVBq4A0gRI\nM1GwSCeepY7ARiBZh22ztUA34CstIVHTlEBASJQ638uDMes1MBZ8DzDHzG26\nvCVPVEurJOUaPlBYrt7BdbzMbDw6fwZuOX0nazGRdIFmlIxOBc3pQEt9NtDW\nLvUt\r\n=sY6m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDo/ITMVsT/dTfouNZSAeYAnXFN/PY/PQCA9b4hfgwEdgIhAPbHXIlYk6F7iqjn4N/npIHHIqcDV+WpVuCl/WGZ2/dV"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.715decfe.0_1587407750563_0.5520247645664573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c862cd04.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.c862cd04.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c862cd04.0","@material/mwc-tab":"0.15.0-canary.c862cd04.0","@material/mwc-tab-scroller":"0.15.0-canary.c862cd04.0","@material/tab-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"59b73d92f5709c37a2da654102a61dfabe148db1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59b73d92f5709c37a2da654102a61dfabe148db1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.c862cd04.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-HkrG4eQ05jHsU25D1q5FVits5ZlTJoy+q0tdAA261TSfWd0AHQ+IXGzGHXSNWccTq3UmGHWTM9in+xO4bxZm6A==","shasum":"8a6f3e84480126140a7ff4a4fbbd26153a634bad","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.c862cd04.0.tgz","fileCount":16,"unpackedSize":54003,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenhVkCRA9TVsSAnZWagAA4e4P/ikH1TUnPAyIwPql7jAZ\ng3eiaOeKVv1nriPzhYVo6Pgwg9IGiTxI7EJ7hgZgcwhG5Zh+E+MYQ2hshEQu\nWsF2pzGOMaYByFmon4o49N7+GXi3d4SZ5WKnxP5+fiNPlmq0PRJawDZsfZc6\nd6mwkAVyCHMUp8OVRxbnvxpHzX8jQkLxGl4Nfm2GlSKnTW5+mTylUODMkjBF\n6AOZO/8MHtS/2cijgPaUFe4WOETMXfOwdeQ4MLeJy4Jg9/9EhKVU7QbeAllY\nihkb1dA/U/Ym7SHZfTcwybJos+ATXrHxpoW85q5so8cSKgEHdy5b4JpFl9lv\niOuCXqn7WQOWTsmSWtBpU3zXUqPCeFRZapPTV0OzHw9wIQB3flh6v/FdVc57\nIwMau25Mx19mzgdtMcxM7xvr1uB509a7hqgHT0kUS+ov0M81CxRpAWdZPl5O\nZxIwCoDhhvl5YWE9TAy5cMjrq4LTviLT6TXJqxPUIsZHgqqi50GJvpfcCewR\nzTHteABi7HFC4QBfQC5r777JYpjrK+Apiqtdhx9Bq3Ykva4DxO5VSSE1D1V6\nZqSvWf7L4J641oqVM42gcKs1XdD2i8VWrF05gm9q3mmwOTpI7TKI8S3LLcFp\n/4p4XBfhA08S14LQ9RWy1R5kgEC6ya/snSehQAymEQaGXBtuYHCgkYsmrbgv\nHC2s\r\n=H6W9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJ7wOckiO3Oqmc9tyoy2vpLf9n00PjvmzORZRKeG+8HwIgCY7+7722RbOsTaLYv3luJ1DkV0SgfVyk8rT9mYphXhw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.c862cd04.0_1587418468333_0.1362299023204223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.e9b01b35.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.e9b01b35.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.e9b01b35.0","@material/mwc-tab":"0.15.0-canary.e9b01b35.0","@material/mwc-tab-scroller":"0.15.0-canary.e9b01b35.0","@material/tab-bar":"=6.0.0-canary.c4b4bba96.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"873703765efd3bce3e325a39e56707cb2a7c47d8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/873703765efd3bce3e325a39e56707cb2a7c47d8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.e9b01b35.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lMq1U57EADEnqsWZ1q2n9Y23IzsQjlimZOhYpquvpc1oeQVnWNRk56v3ZhulYx2g7HuOuH/cjoLdJoKNhHIwAA==","shasum":"8dcef71557694ae09330cf8e18165461dc2908b5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.e9b01b35.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenjBtCRA9TVsSAnZWagAALdwP/1PPoXY0BSH0YpbFa8lD\ne2LDi7Yx9hchx205Mr+cQN6ultvK/2qPDYS47T7RfhAmb8CmoZaPCGTtgGhw\nr848FYbdgmFy2i48sdKE1Q4omzPmZVdmr5rY5EhGaJ/xQU50fGM3UcS20bSx\nYjTzsLytzK5d1UiHRvzGFrwnDRJaqk5u7N/DjcbCUWjIxyd+DtR6qy+1tlHa\n3nkcCcAwR0g+K1iAwXHHzUwMeamz1+1zUpXmCmnYVEUMc+zIWAwuwi7CvWlc\nOwb+Zr30cYKuj8ED04e8V2esPtxd+YthZlYR02yax0PmpmkmUGsFVwpyxgMx\nEL1KXg+rCc8xncIh8JVwE4s7zVxWrbW8OODm1qjb/0k+n9jfFYOOXKrO+dx/\nxAHypUauC7pqJLfO7XhjSxVckrs8vAQsbR2wsQWRIbRxAWWelEw5e+9hrbms\nYxFR7B4nbjvry0a7PwSywItmLLKbP3On+NCUTZIAmgD+rS5ORZ4WmcB9Vk6Y\n6KPiS5Dj/E5KLe2KoO8QAtrt1FE9d3ANkryl0tCJW6nkJN9J5z5raN4LWc7z\nA6QFkNH1Ye8zPWuV9Bsl3Gu8ZAzfqLVLBlbdXMcb88F4p+XCpJBVAx6YbL/1\nRJWtL8jVL5hI/NSJPiek88xZe0niBLX3+2QRkhB5pymEA6xZhffLP6DGr/sL\na+tr\r\n=TlHP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWnay+U9MMtTYQf29P0EZ3PIF/J0C7WXv0gC89V7FmJgIhAOTxR/pUoVBRo3u9FnHmF4us/6UV4jHsZnVMITUHpV8C"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.e9b01b35.0_1587425389541_0.5123252551319755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.ee7e8989.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.ee7e8989.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.ee7e8989.0","@material/mwc-tab":"0.15.0-canary.ee7e8989.0","@material/mwc-tab-scroller":"0.15.0-canary.ee7e8989.0","@material/tab-bar":"=6.0.0-canary.7b4482402.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b58236c5ca9326b11d092c5b9977dbd601298a2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b58236c5ca9326b11d092c5b9977dbd601298a2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.ee7e8989.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n8gr5g3yrI40FQZtU1xJIHK0y8ZLNMo8xmjpjS7CpZ7VkdJmE849oCBVA0XPb9vX1JZoSI5xHmQZfKlxKx23yw==","shasum":"2f44932e7cfb59eb9512aca2fd074b6dcbe3b363","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.ee7e8989.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenkOdCRA9TVsSAnZWagAAb0MP/icE7R7qzJ0t6V7oY/yg\nQX1qw0EpX45wZnBR7q9RKqTIOUS0fleiVBiep2YYr8U0/SUYUkVk92GZlrKY\nwoNyFD/lOrEcytbjATVfbB+acVuG3Xporx1W2y9WoFstvKFzw0f5kiNgdasR\n9/w3y8Msxiz6kHqsSw/7+7wm/nOCQsTHw12IDNpw6KBA/lwYwyIoM5jPfrJK\nBUfme5oi0uZfNn0DNGqMpuoA+rq3x4E/FWJqyWcUwrrLGnYgX134KSgEb8r5\ngu4gHkN0yj3sJCmOnBgwO+knhWc6bCbVLE6tVTa19g7PhyI1+OfYC0Nqya/M\n2+mApB2bx5ezXkQFdheAXVboihyYu69IWAWvVyWOIDN8W0bPjZRkTWZdTZ81\nRL18VfoGlOvmch2vB9D7WtxcC/GATemymOw+qCUBz3HsmHCeXPp2qWWT9IdV\nxNLuHHPp23C7NioE1gzyC5ZJ/dpHXSkGMMAOyBhJWBFyjAy8P9GPmL/btxwg\nofMhQlE8fvgUUhAz3CQ8noqXqm6t8XJUtxW7bb/zdbZQgcAKIPQdVztGWYoF\nnMOu1/7Aqgd3AYQ35FTuyLbRgSolyXsmxj8FHXuY1WLtCwNZagJBLHHD3U4P\nEjqE4rW4aJDQmED0z+wdF3tMYYZId8brUM7biLyFk8wtSOBwcyyokPUg71//\nNEn2\r\n=G2Hg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJNLS+9MOz2Q8Fot/63g4ETPLTmi9ifvdhQTiStbtEiAIgJcFly/AEMvvDVFeflwNXSTJeyrU/kKzKVZxqX3TtiSU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.ee7e8989.0_1587430300835_0.16526727650866757"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9bf47ffa.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9bf47ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9bf47ffa.0","@material/mwc-tab":"0.15.0-canary.9bf47ffa.0","@material/mwc-tab-scroller":"0.15.0-canary.9bf47ffa.0","@material/tab-bar":"=6.0.0-canary.deda86d8c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"282e30290957ddb18c6119523574ba36c65d7abc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/282e30290957ddb18c6119523574ba36c65d7abc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9bf47ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-LosQxJl43DjvoGJhWE9W47j5x/IWJxqdvcWFBjKBW1CW1JYYhFkPbAHIgDUtK+G+Men3JnZjglJjB2QSQ/ffCQ==","shasum":"5cb3950d0df7ab1504d3f122df9131a0ce34d50e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9bf47ffa.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenz2xCRA9TVsSAnZWagAAxU4P/0BBu6LXNr9ZCscuQpQM\noTclluguzHN5YjYl/tVInF+siwh+8hU86c/Yo9i0K6KLgdxB7fpi24C0NHW0\nlUuwtRzVgOpINyscy6fXFGbzdh0JdVjON+BfM/TQZUXtXTHJnKTk3WGeElkp\nfgRxxGh/5nRv5tqGQxj8lOZoowoTO2Pmds1WXbyKhzUxYRio1iib/fiCFHkJ\n6K8xBieUW9w49xqfHHMK06h+oo1hXVZnXLjv3uNbA4jy/KyeMTtfp/ytH5j+\nwWwgsB0X78yS/FLDZrSQ0DyEmpUzu7Ulq3ONpNCMZONGM5O3vIa6Jt6HBMqR\n1NadPT5AUL4AVcAFdKNXVlRhtKgw7g8tsMk/FCItJyM6ymrmMVrRHy9akrpM\ngCL1tge/Efy6Eak1Z9kI1iZy7Zd8Ug8SqSMxr8cqz3E6Hw62bp2J9DQK5iU9\nHL49NqwgbquxD/mvAnoCeCk80UinBua2mrZOFyLlHg/o7qCkzg0oXPYtB3Ak\n5fVHVyb22jbVxlq5vviMhxyXpCXSF9EgWQSH1GJE6AvHRcnAZc8FZz/7hdTQ\nNHBBtEcB3cYCskmqCMt7JQqkdqTtDFE3OAZX5yltpVEK5FeXo5AKF4ZuBMPh\nWVJiM/oS4kqVwhIa20egJyTk+Pv3cyezgmU9+Bs76niZzv6sByD0JC8FJiqO\n8qcs\r\n=ItVy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDaYT6ZimJFB8X0xqeNUYCloXGeG1KPbQ4xFjdeQvzPAQIgGK9eGf0x+RIXMn2wHPpA3WVbQizdXcysfEC9hL/pgbk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9bf47ffa.0_1587494320798_0.943960870567029"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.078dbd98.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.078dbd98.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.078dbd98.0","@material/mwc-tab":"0.15.0-canary.078dbd98.0","@material/mwc-tab-scroller":"0.15.0-canary.078dbd98.0","@material/tab-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a45b9b95a7710162ffb06fe74053ff1d108d5684","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a45b9b95a7710162ffb06fe74053ff1d108d5684/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.078dbd98.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-CRowJvXzE/k4o+UWG/OCINAYDBAvlAWPdQFkiIB2SLY1FGcxq7a3bAdeCCJ9WsoY3oNUu2CZXQyPmtfO5tWsLg==","shasum":"6729b5ea973873015cb9d4d00ae148a99bf898d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.078dbd98.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2HJCRA9TVsSAnZWagAAlocP/2D9IxCSxhmvEhiZHYG1\nsUyFLpKJzhFEEzol3QcGm4NaiWvXwvkHhjzp2TWupyfxqQSmzKBwV5P8ifHU\nB+suJlG/o9g81A03MQf4cmEG3Wrf1he2GWUUYoZvFRIQUYzhFMyYEgs+FHBU\np8nBmM5PNkrEVdA6V7blzouJPoPmzs1sMozqmF3Ex1hf8U1YKMEA7KR66bTt\nEAltpHtHPxpldsHXqOhKo57xphazgKEX/In2M7uVXKbqZhOAkVOKRXywf1l1\nWLG9VlF7LAkCLGLq9gE2z6iadrmz5CDpdcCriCdANG/fDav8vkYNtfahpklB\n/Azldn88RCyTd6qqgw7ga7Mct1iL9H3nupKVpEwwvHH7Ysi+jiplVQZozonh\njMROv55JakQoEfOCZ9M5AxX3eDRw0v6KUzeQfHLiAWBXZ72A0tNbTHWZH2rQ\neB771VXQE+MJ0mBPn5LaqcX1Z/CsoF9X/ArRH4qNlY7lMuByq2qQYaD+MbUA\nj6P3vHDYDv1ys3mwoKlHeUSBKewtY4rpLwgBTmvhA/ev3QC0pQFqhtOLYljf\nSKG3J6wNl+m9IYx9RjpawIs5jh9RzvQ6OGOeCxHHhN/UM750W+VwR1z/Cs64\nymKzXs/Zca5H2IdngWkSFAmhMp7xAvqb1IFK0fmwvJJUQ096Aq8+mNWTpiM0\n/QnM\r\n=p/mQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHykbHy/HXK7rQqLHP3KnmfapBcurSBZGw4WUy1b6NtbAiEAgxDAJnVKVYK4T6RxnACX3T1cbDd6NU39usHyhFn7Q4I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.078dbd98.0_1587503560583_0.8158520785374188"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.953015d6.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.953015d6.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.953015d6.0","@material/mwc-tab":"0.15.0-canary.953015d6.0","@material/mwc-tab-scroller":"0.15.0-canary.953015d6.0","@material/tab-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d875e6d658b1a3287b35d2c77aa8274d9828fb46","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d875e6d658b1a3287b35d2c77aa8274d9828fb46/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.953015d6.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-PNkyXCJ1rt7cFFNDWbCtf4m8qP3h2XTXVdnFJtRCId+1JKr/D3XGpGT06zelaaPS4Dd/ahYGHE7dBl6eq3kRcQ==","shasum":"eb9481791f71bccc6379b654d2184724be8a864a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.953015d6.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2dDCRA9TVsSAnZWagAAjigP/A6savCsFNv/08FQzY2h\nr4APw92kRBmAm7TnKw5oNLQlWA6m+s9euuvdVD54GgDk71aq+lyQJ0KZ4mkI\nzMOu9lDH92pxYYN+AE2G68RmjmjwMid4VQx0glSGLd5vp+2qgIcjaoY0M/UT\nIHn3Z+XBR/q+3tUGJu1rbVqYysfiy48PNcOSGsFVQnaGPuNq9j+0IfuQ5i8b\ncw3WncYb5t96EKPKp0bjvcxAR8hZyjMDnmX7Q2/JZdPKNqKA8BC93WQvNde7\nIvgqVjt2TRqzyb4kmCnKmf003tLwGMGJV2GlYkvLNUcewHbqFczO0SnpxCox\nnOUrRCteeAgc4tKFdoy0BT4sJ24nC2WtMz617D3lcdz9DYefENlBbdchkfKW\nAxSick0cVn56ev3AhzY3OD6IYLTcpMRaUOclbf8EwSdsTRXtIuVnFXGxAlcK\nAv9XXdh5xcgI8dKYH/j6jiXjmfxQzSPVAruXAeWd+YhKrr+9HNGLR+LBhgld\n3aoaIsSGD6KMHFNTWuRAl41+qWWCy7S3lYxbUWbHx2EKvPZE9Wo18aCi7Vge\nU2suG5zw1aNLKmKtEnoCpFqPfIS17ukRL77hBFqON5cLH/xNRwtj3O60Ws77\nkVNmDRkCKrMths6ZIWIkcQ0HicB/c2bbIpUuKtw37RNzHoOJt1rNSCkusX4b\nA0wv\r\n=4ZPJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGQzBgk8JQtkMZyp4vsEgvcT+QiSh0jCAga5NE3aH6dCAiEA85g1gMK3+XeQOBJ0KO9NoPqo5iXGw5JI2yrrcAZ1EeQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.953015d6.0_1587504962668_0.9022766540630152"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.c360ec63.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.c360ec63.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.c360ec63.0","@material/mwc-tab":"0.15.0-canary.c360ec63.0","@material/mwc-tab-scroller":"0.15.0-canary.c360ec63.0","@material/tab-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5147ccee26bbbacc14a1d7d86adb845ed406bbac","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5147ccee26bbbacc14a1d7d86adb845ed406bbac/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.c360ec63.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ja67V0yDAvaxttM6iWmBNweqc40tRXXIVSh00toyA6tiWShejpKw/ahgav/gVwlQcSrBGBwVDAKCBKwUHRzbHQ==","shasum":"e1cd102e0579a2c7b4c47436b3427bdc894df832","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.c360ec63.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen2y5CRA9TVsSAnZWagAAS8QP/RtHhQHy31dOSHijRQir\nnEhLc6KH+x75RUciwYgCUI0/rWb9USk1UWPGIVGlzrXzdGOjjI4zOuXKP5G0\nly91qi7bkIWHw17eTlV0A1hvHGzjp15yca70DGB3YNEVmViS/31ssCD7Iv66\n5S/E+so+QbaExS0TAnOisD3BEH+8EkG6Jd10x8c417xvVYioEYRybJ0Ukxrz\niLXF6PRf7rzFZKKw622ORE6X0uKEWgYchGANFP8sj5ru6lkWr1XSVgAEylcM\niEXePApa5OD9gYk/3QYncAvwCptKGwnLcGiTLxhGYs7qkUKVtA6CeL7fwN5N\nODz8vgKTpEsT7+pin3fRIREEMxAkk9FXTFf+IWNsubRRrRaCt36hK6QicofT\n9Lz1AjXn8e65OKjFD45OkeIQ0C86rSmmS7H3MY5y82VZqQ+53Lmygr0yMUbL\nYE7GAmnT0FtDCLmEuGsNoqSTOMu+B1n3dHQiVlhkUS1zZxULXRRaTYOYMSSw\nPtAcxHG0gjKXEb+yNFVKTuwu0p9sJQ0nSM2Np7onUXIfcAJ58yNzIUyu6coK\n6sXC5Z2diKrM7Yl0atVutj0KNe1/oIezB5bVEnIqS3Ni/uv2GB41FrEweuJ6\ng3MfTdcqHBbOTs7ISrmB9p+N+7m+yKEQd+7tUO2NTPRFFs6b/XZP06HgtwOC\nQ7zP\r\n=yGjU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBreAstdO6ygD1kQRFB1w4H77yW5kpsaz5ZBZiXU3zYXAiBMMIXaqKD0Whi9++N8gfnLCijosID6ZM8ZzHMiNU7WgQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.c360ec63.0_1587506361413_0.2603954354681519"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d71b65aa.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.d71b65aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d71b65aa.0","@material/mwc-tab":"0.15.0-canary.d71b65aa.0","@material/mwc-tab-scroller":"0.15.0-canary.d71b65aa.0","@material/tab-bar":"=6.0.0-canary.c141801d5.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5f57992160b26bdf181837dfc0b0ccac0425b3a2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f57992160b26bdf181837dfc0b0ccac0425b3a2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.d71b65aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-rNOnNsV0vpHxJKFD6B2igE+jBEr7Xcyx+S36wCD+pi0KEY9yXZKt9kX6Mq5NdRouW8uKP7UjBEu+TkimsnbBuA==","shasum":"07c9191d8e1d7f211252dd0b704c0a3d1e62ccb0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.d71b65aa.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen3XMCRA9TVsSAnZWagAAFSAQAIK9wE+yELSxJp/NVcXa\nbQ2JEahfwIydZfoXyTA+6OBLLaIc2kQN1FK2nKTtTabF3c8NCQqnIQ9bFwMN\n+BHAppRdkka6rTp5+ZsMxnPNKxinewBqh8d+1pAW1hGmEMK+2BKOkx4zeouG\nZoK3/scHiDYUwGlx3lfTJG4fAfO9XChdTsh0zOwOi25gcGdLIppmHZsu2Wi3\njIonC2g9Spj541L01wFTqN7FrGWSrnLj6j2yknUYYiWdFFwypXllaRtRGsVa\ndcCtHBKISguWsPWsviDwG9eCvR2/3g6QsN7lQTTQHiv9Oeohrf/OqDDcM/U9\ndOjPgzh/W9MvCXs/lWXcs9PTxmrugyUEjC73Y2aO/AxamA1So0mPeXj6hi+o\nM0GxN/delO4FjMi3S/yEra/7BzyswAhlws0SwrNxsupDMkaH2Tm8C4OrQ8WY\njBN6zh1ehmetViga+lX3c9mpURdSgz3O9/DyJX5aWmQRbCtmQP27Lg1dCBOD\n8f2LbVwQwxCc3B++h3RW/iTp/avwRBs1v48EmWMAz2ThYGqtAwCFvzW8fBpb\nV1EmWF1rEQ4paCPxchGTjhFf4KDXKv1ylYJkbU3CBUaggvl4Uh2C5PaUr9rx\nxq+mclX73H2raiJ947vcw0a/jtwoFrqQUy/PsvSf65qg7JhcgikoyumxYdBQ\ndrq/\r\n=CrW5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2lS8N2q9Zx54DN++OR+dzZwmzxkPdhCtiKwe3ZjcWLAIgCB0AUT9x/EP/A4NB6kBXVa4T52uv34gvezjOSnQl6I8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.d71b65aa.0_1587508683955_0.35742289834255914"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.58d51135.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.58d51135.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.58d51135.0","@material/mwc-tab":"0.15.0-canary.58d51135.0","@material/mwc-tab-scroller":"0.15.0-canary.58d51135.0","@material/tab-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e70b1d32a2db9ff5da6f37c7b50790b6269e8b0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.58d51135.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zVpe5IWj6LMJ8F1daEqCEaG2bxUsvPq/FdgFrOdAQsXM8p6tX9FlaUNL2hKaIFKfAfOqGl5SZ6+ImmYNXdJjxA==","shasum":"60df815e5afcfa36a666c435afacec44809eeca4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.58d51135.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoOUdCRA9TVsSAnZWagAAjmwP+gKhY2K+64BDrTMo17hT\n34d6bdDiqR+CoqjAOgZv9bRst9nSnVjB+YOYn0000bBGfwCruVPCU54c1ZqJ\n471K4E+4CI2NY2WuY3pQzYo5hJ5YttQQObbUuwlS4luFE7P2vu/6hHbZ4Nu8\nU2Xs3d8lux/9eCcuQxLiPy28xnn8TJI2BgIDv98Bb7Cq+go6NiTXugr92DSG\nefzjWBiE8fw/+3zqfXd/TZICEiZOFRSmifR52/qQyUlx2sx9raQe1Hx9IkeF\nrUE2rNPprEjm5k50r6Q040PpbiM22Ctz5vhSrZ1hXqjczK4aCo58Rk7F50dE\nQphkgYrrU9QT5cWMcJgGRzoQSh7kXdtI6OSFNJw6lNyEYvnnIgGCrZ7Kq4us\nt4S27ZXJ5p4EqTDtdOdXv1bFOiw+zjCLRzL1mKbrH0DUpmZRiXtcwZOfxNi3\nvDeAR6m5/IRWY5SIghZFF/p0Skmz6Ff0OpYIN/D2T75BG4rF3YsdSyiWQiQ5\n9gHEfW7wikmw/OukCNFx6GjM4ZvJ1cPceXMx39ga8sQmvGu7jimRfyi3A5lW\ntxtqlcd+aZRlykYjEBnVmi+ZGKptj6UmJY5mf3zOtL2x2ZFdw9QU2ol5kel3\nl2D+PCVC6+o/qKsC6F3163NXpGapOJAorwWMJAc6Niko+ngf72nKGOXLD+xZ\nzTdL\r\n=uaKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB6L1CufvqFctsh1IVSUXT5e3ZmGK/ICD3C3ai0uT3tPAiEAgvx/chxOfuVDv8V+MUJaZ60FXVl3f/iJjX/o0VIczAs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.58d51135.0_1587602717189_0.10657915874292945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.d0af8ba3.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.d0af8ba3.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.d0af8ba3.0","@material/mwc-tab":"0.15.0-canary.d0af8ba3.0","@material/mwc-tab-scroller":"0.15.0-canary.d0af8ba3.0","@material/tab-bar":"=6.0.0-canary.28d10a96e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"86c71b26d7f2ffcaefe79c4882ac9867bef12b0e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/86c71b26d7f2ffcaefe79c4882ac9867bef12b0e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.d0af8ba3.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-NtSy7ruZS6ERw7uo5ksqN3sO7dPwjlSh/IZ0xKKHR5wc02IaQogm8XkX3wZ25dlxFZQp+jUU4+MlsWriWZppCg==","shasum":"5282208ce26fa230a6390713936f48638f9f9872","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.d0af8ba3.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodoNCRA9TVsSAnZWagAAZfsQAJ3WI2MI8TlwEvBlrT1c\n+de4bT11otI2HsCTTWE6pS2HiMOfsKWPMnlZA9OORqvHT1YCjiVdEhbbGajV\njC6lnhlUrviVO8QMGNdLsa65VCedH1rhw+LhnZwVHn476BvZDuO1WUtRUava\nIpnR09RxbRMc1tz048i5JsrmjdwpUil8Jj5qu0Hu1RwsSlPKNOLru4fEkKZG\nm69nFYMrWLmOUJaSdJhkiKqWn9ZBYXp4Yo9NOgQW7StP2Yg2fsCm0PQvv+xc\nlbC7qI5D9Ev53S2Ula9wZnU/7ZSAxGjJ8CqoNTERl2NadFuq/XG4kKdbM3LP\nVC0sgPDOJX6NN97LLwI7N1dypRa73RRdKvzimPdXXethWCbeS0xupL9ftRnF\n3pG4+yLEibtW7jahgi4nrKblRSqP3Mi0EVJNKA2JrFAoxcb6XimeicatLAz7\n09r0YuzwJqM8HEW1VQlC7oZJOfCgsYh9XNy48w7yw8o8JHgE9d03W3JLfUsU\niaXZushFOHrFVTz66zZW1GKimsMSv5hPczavxR9CsQlB6+mmu5sPRaqPY+Y+\nUbTJ+HmiglD+DeMTb64Om3cOLtjeMzPYp80zJ48LJDWGp8IhISzzbdzENY5+\npzSpU8BkKJA6WOnEzZCU6MhdPNPkZtDfOCeAhLafE+3TPrgF/tJfFpfKohsJ\n6QJv\r\n=Ch72\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAvIob95KxGmOJaIqMR0NAUxQAI2w1dEEC9SWOLEOvtvAiEAgHl/Zg5FmwdPeu9S8fiqxiVDBOf0XgXed+xtuG8Z2mc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.d0af8ba3.0_1587665421100_0.6784373843248619"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.8872b17b.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.8872b17b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.8872b17b.0","@material/mwc-tab":"0.15.0-canary.8872b17b.0","@material/mwc-tab-scroller":"0.15.0-canary.8872b17b.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d1f49732d08170a0330f9fb28f2b2ca978daf858","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1f49732d08170a0330f9fb28f2b2ca978daf858/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.8872b17b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-y0bAE0XGRor+oQqrdSDxniVvHtT17CzrFfqbaEqwzfTULlHd0kHfiZz6rVJd96NnDSfIhOpYl2AYv98pyBvJMw==","shasum":"e4267dc4547c05950827326ca9e2fc6a89606e73","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.8872b17b.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeof10CRA9TVsSAnZWagAAUZUQAJm2c1jmWGRv2KLulBlC\nNBWKxoHYNOsquj5X2k8tnGnuSWLuGfHb+pOHkmJq6E3goOvSCXmOOB9mtmTw\nQMdmIVeIH7GbSEeSVW5oiT2u6a+zZX54+Vm48fN/xGlY/INchoEpVQSJyhuc\nebL49r/HG8rUGvbZBv3HFUTLA5peAgVaHhzCa0T2xNPrwOSrqfqHCwQ7iODb\n9I1sGyse6mCuh46Su8RweoJoYLZw/fh4nKDLlwYcjhA+qf82yVhGd4W+rOke\n4V2A79yuOzGYdPL0UJJ1LhZJ7Tkkwq8Lx0IT1rqIw2AUeOFIPhQVBDJN1s77\ne0RqpPGjSkM6k4YNz6E14B9N33jLAoodtcovzHQvX5TeujBAgx2iVFzdCpiM\nC7J2Ko1xsiRmBGiuJUlJ7nBjFPRGjXHuh+/uPbCjsoxQc06L2S9uLYBjHVIW\nYnMCGkMpU+E1e10VVfiKfEEcRiUwlc2J1ZK6i+AdgP+BK1ybOIpCKqiCg+y3\nCrYoKLYR/NOjX4YeLLJ5V/hzXmD1ngiO+nhe92VIQeTv7VdYwL3ArdmhT8vc\nTPfCRALzsElA7nrtvhL40LLrtBfE81fgjDZYRK6VsXWIKLr73MEn17FWEUft\nCCQ56qFqoJl9EO1HDSMUjBxD4JKLmpmCvqR2k/6p5w4+lh3EjDWhTwoV16cv\nv6la\r\n=cLx4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDmdbdzL4Hbac+2dFoRrnJih3PLWEn/2y4IspZW8hJjkwIgNjN/C73izS4tCnRG+OGN3F2z7odYHuCQb+mrchawdog="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.8872b17b.0_1587674484411_0.4069597058563692"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.eca1a610.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.eca1a610.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.eca1a610.0","@material/mwc-tab":"0.15.0-canary.eca1a610.0","@material/mwc-tab-scroller":"0.15.0-canary.eca1a610.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2d2c958e6704a2df0a1a210e3c3d050dbe7a50f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.eca1a610.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-EFX1OXWqHKaevMqXaM0oZAdpMUFxwlWdsUtJCkX1KtD3gO+1r5xNLxCT2uspKylTaoycmkVwjQCrUe1iqdl3Eg==","shasum":"7ce102f98815c74e9d98f02aa0274a693ccaf93b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.eca1a610.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeogv9CRA9TVsSAnZWagAA1g0P+QG7WYl4N+9IY4RkQ9dA\n7cAgSYcRAhZlfmSuioMy0cgAczybFuMiXKFdI/vja+7lgNTrztYIY7F9IPPf\nhcOrALY87ggSxwdpg0nhJQdZ7AYjajttsGpz+ApHH6vXndT/9jcw4y3+0A5m\ngWgRexMogJzIXv3FrichJejx0igLvXTUSALUmNjwsmKT4cUnr6U9ZVdZzsho\nhziXZ6muss80OLh/bClZHicf0LKiv9EwyltMBakI5yuVv+P2JpSAKSfC/dge\n2FmMFFmlDJpYcPlqjc+O2FklCT2SeueGgDZ4bjRfNhCxJe7oYhZ+RFqJRsFp\nq+0X1Qridu5dr9AvC8wZrBFDSKEzD6adSN6bVP36h7nQ21BhZNmAqYJ+aztJ\nQZEx89sw1C9ogK7xrYslj4IOINJyet/geN3RlsDdZd9DhGwb5jKz548HJ4LA\nx69pSVUn6TXmCNPrINeX+gXvQjLdH7lQvUz+I0NQ0s2l9VFChOwEQg/ILwqH\n0xwWww2+IqGWT+k86EZAHOZ5heZclKZy2yPOaUMydjYYFC2HFUE21ewVMFGF\nb8s6KeQhTPoiw7yyozrYYhlO2q4x/rc1eYwyQVrXR3yDDJDN4ipFFIlTFRvh\nPwZW/m+loXaVQgWvk52QoR46FEccskNJyG7BQmFKSGWnZLjTrzr+uhSeJu0J\nSvXl\r\n=2R1G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhvSmI2+37HGD7rZepa7OLH0SFWHV76LnE9LupBWcvGgIgRVc9OaN1Bu/1prsv/H8VoDgpmFrkSsRqbQH2IjVGxNU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.eca1a610.0_1587678205251_0.44149365487514114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.baaf529e.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.baaf529e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.baaf529e.0","@material/mwc-tab":"0.15.0-canary.baaf529e.0","@material/mwc-tab-scroller":"0.15.0-canary.baaf529e.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4f5e01f380a9f1e5d4d3b0294d5110692bcdaee6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.baaf529e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-b0D9q2YfkBtxDqa+MD/Ljx1t4AR8Ly5dnBpgtsfG3Jq3RFVJSsY6mS4+VBnNHRsyLB4DLgeekjBsdcsomBOOAQ==","shasum":"385e74a52824d0a88c0972dff19f4edddd58be6d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.baaf529e.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohpcCRA9TVsSAnZWagAAlEIP/3MvFMEV/NKN8yoko03F\nCqclvZRPG7dj/CSLvCUQm9bw/jckPmoKIXNR4bvZPYa7vePnXgVEw8iUapk5\n3AQ5egfhqTsssq9OwFKnplK9abqBB//mvKn2QcdlDy+Qs5V6G0JZ/Za6jWQG\nK0cNr+ztOPA9oGSbpTdKrcJZmJQgb4gxE+5TZc1fLddxaiSRMPpRLeLzG+NY\nZx7zYKbr/6x8i0KABIFKA/frFP8dW3ApLiTAuLrb4ISlhS9Kt5VatwpBAFiN\nbNdptieiJ5xmLTb5XAfRfkuMtKNkHK8ZmlA0TQH/OBH2gg27X1O7uefUUEk4\njC9bAmYTaSmQNi4uKKnSaj2Tii7SR3bF4bdYf7neGAAngSSF2ya3Y+mhBoV5\nIs+dAwJh7GPweG/KHRMpY51CSlh+O62+K5DGArCWEfTogR9xoNgtuFpKlFvH\nqGiVtfekYBaQSvTHHaE3TnTWslKZeCgZlNQoZMEuaGlESA7rfvq48W9OgFO3\nFR+f/xXe+K0xO+6dWRpLWBetxFe0DTT7eCosKYokRm+6N/67cWmAicJEQBNo\nsgkjn/miw4x3byEetwRtn8JKY3LY1JGJ/BvouW6b9QAf1Fgcg1WK76lKyN2b\ny7XmJ6mtMWRaoF5w7g+BD6Ps7LSSlJALSOIY7pETVbyFfzM8WQ1LqMtgEYrn\nQWZv\r\n=CCaY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDR01SiH8UdgWzF8mYaXm/IoizY8/YhMuNShfBHOQjJdAiEA0OgvA93GcxvsCdq94/DLc0VwKJhveLMtQxuuFqXuAiM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.baaf529e.0_1587681884489_0.5845962776739329"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.7a7992a8.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.7a7992a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.7a7992a8.0","@material/mwc-tab":"0.15.0-canary.7a7992a8.0","@material/mwc-tab-scroller":"0.15.0-canary.7a7992a8.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b9b74b473b6026badaf980339f4451efd1a9e8b7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9b74b473b6026badaf980339f4451efd1a9e8b7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.7a7992a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-W7CsHJK0vSE+9Df8ClpGUw5oTk+FdWcGNvhsO3d8qlJOtXDXadkPTl2X3o0eupwxYCAVK+RFDGmdBtxi9MhHqA==","shasum":"a07c7a7323a9b99760cb73996026de49309c010f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.7a7992a8.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoiFjCRA9TVsSAnZWagAABAEP/3B2z4TW7rxoa1iji/qk\niS4I/IYI6UBb5y3YDRLNNFC40D/Z3NgT7mezLPnXTQVoq01dkQjWa5OlMeZv\nxUbwOVdBRzMC62LsTYulhU1yfX9FcHa/85nmBH3ekN6lz5FVsahqtgAB73Er\nVnpz042h5VdnFhXtL46hY5EYwtCRjgkawjJREXNh7PkqAlsk/j64m871lUQ7\ndNmApGqdaZY+BSqjOrNpo9aAtUPmVRiHuZmusFiv7/u0lZlPv1XZvhKBFao4\nSESuARpcgNyVSDzdweM/Ec8FClaLHJzuABgaSAnvzO4YjfAN6f6DiGfcFDPG\neLM2UPiGiYn7lT55mBZDHxO+5BtYGzo06KjSOQWJ1aPtMNzS0Bsm1KITm9OC\nc4GCHQ8dB/9IEaYALyeWqI/blWVj4uh5/j47KecO+4k2yVRB4xdFaWmVpWaL\nwEHdeLZ47BZu0vdWd0g7y2FIpiCBdNXgnDhCEA+xO4yZI/foTVghlzfg9nW8\npLTQre/UjNbstQm4FfYhb3N60mETrlS4CZYRSFEW2QH6Q8326HICTEVrdACl\nTpGvBuXnReax8ZuJxZozG7ULgM+YSE7W8FaCBt5bKqmGtOJGTeGUWScyOTxu\nttk6pApD8CI5KuuIk3d+ax4HcndltNJU2ZXQ+wQCPj3VqsI0U/jVgwawOsW2\nM37R\r\n=fOel\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+7sVT+2i+gTQBj5/xkQeJ7n5UmyFr833XeCBkOpPCBAIgX3zYXoR0MLInhfehDzxZawM/+4jFKHqWuxR2GxDafI0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.7a7992a8.0_1587683682761_0.33842476798651044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1150d64d.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.1150d64d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1150d64d.0","@material/mwc-tab":"0.15.0-canary.1150d64d.0","@material/mwc-tab-scroller":"0.15.0-canary.1150d64d.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0b7cb5830938900ecd0b5201ad88746d308b91e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b7cb5830938900ecd0b5201ad88746d308b91e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.1150d64d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6BsDcsOaKxFRs4ktLyfbX7vyUHORLcSKdEjuufc5uMeOI9WLdxOQ1opPsp5rKEvFDxOvk796J78y35FSKc0P6Q==","shasum":"a2bb97a8621d5efc11385799d26cd529b8621382","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.1150d64d.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojB1CRA9TVsSAnZWagAADlAQAJJY7uQp/aa62voqV37X\nFZ7UB/t7XS+dy+PQdoY2LMDZ5SHfJ5972Pg2I2CU6LIJC9qLW2APmnGjl/it\noo7lB/luxfMPT0RRX8g4/GhlSG98gq9xo9e34cOuOCPqBe8kEIjRd1G/cVZK\nM9wcnLVqBlPAdDBezuci+w8n2G4EOy+XrdzSgU8KJCvJfHXuVHsKon3scq/L\n6njuQf/KluW+/bi23iBRTWTq3ZqKvBiyxECVr+TxPs9Ejoq49P2Huj/EBAzf\nP+9p/jO5bU72Sr9DBSTh85aFFFlhyiGBARAzWYcS3T0Var7bdPErJR4DJGwy\nh0u+Sk9U9CT7QN2ZgAGXrhH4lgMlF/QIHi1yC6BFq8vFKQK61vAXvkYKqgqZ\ncxTI5lkNAxZMKXuYmVoAcE24/T4E2TnLtknOgl8LLtqPSMK4Yo1fNjvS4wux\nIapQYExC1//iT9NN0EBeQIs6xMTZwRG+j9KLr7fTTqsp6aF/fzn/kae6lOSi\nTdJ9WTC6VTBWCnbOtsIRrXEaJWEEJtQj4D/xu9/QaFo8G3cvLoxd2wVzcQOm\n/mzeoW/JRDs4U6ubNOp9YsWbppjoAPCFNU0TocL9CfCfXGjhtu/dFQQyhhmp\nBwCZrD0E8yInR6wgA6DaUCjRMqROJP3aDe6ZclvAP7SwSySkJnuvQzPnGoDW\njNBl\r\n=p768\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZUygAUXwFKGktya8wU8P7a/cDTBkcgdHWyf70g7blhAiBkE0fiCJa8QuWQ1j0LZdqBk4HMKF15yEnZub6iFSa0qQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.1150d64d.0_1587687540620_0.27769513025907466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.dad3f828.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.dad3f828.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.dad3f828.0","@material/mwc-tab":"0.15.0-canary.dad3f828.0","@material/mwc-tab-scroller":"0.15.0-canary.dad3f828.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9b04a7b15588d7423d100bbf29fa317a1947ff","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9b04a7b15588d7423d100bbf29fa317a1947ff/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.dad3f828.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-7uZYMPBWvPAhr+mvWGs7XY16mIy0998sRqWpr3nmeOfsGoU6sNXbqz6wY7LhiHYr0JTJ1jZW/JpaxgFePvdv2w==","shasum":"bc43980bfa402578454263d2b0c66aecaf9a4e2d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.dad3f828.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4ebCRA9TVsSAnZWagAAEIkP+QENrHitAYk6XSOE8JQu\nXB1roZDx76lzNcU4EtxdtEN1cHnsoYGgEamKpJIi0HPi2GU9AUJqxwQPwrZX\nrxVPHhdyst8syVVrQ3UWs75BxsJIPmOY1gV7EZEmPWlV1P+uAXiL7ICi6z7s\noKDBse0PM+7Uyeir+wn51iyqbWKRFH7zoAKhv3zqMcSS+VWeDxc5ACuSJ8YR\nlb4UKMOIVeVL4nRfVQZtgXvuWSFyGuO/PFB7oJXDKGdXw+0qSYRomUqaa1X/\n3EhFPe7XGf0YsDyWxXx2Lqcu+b8NxDl5jgkAKbhhIvFSCHngBxIpsnF5oNeb\nBuAaT5W/AmYPSnW9KLTVvajObLAqEboryz0FzQOVtFZKiZfMRS+vGUsTQLIt\neL235t7wGNWSfTujMu5NYbJGJ7P4QHl6z5cnsr8hYH4LnwTsERyo1UkjMqr+\nFTSGWxYWhJ/oCuZHduD7Bn5w6SbLt9yagBSngBLpvs7QJV9qcsoj4Jq9UPtO\nNcSona1ZF/XUrobNzcl+QVDBDLSGFWXNdoH/EyLGp6gp9/Xk6hGXP4PmeLaz\nksq8+UnDHnKi2H0uy0wI8kIpwQ5RbZQvjfUC6EG8H/q+K8AE5iwWxa7H4JXi\n1+wTXfTpm3VhFd2SUzHl80PhLtsD91nBy4pXoWPW63qVfhGvYJlmUmU3cAqM\n48pF\r\n=CG7c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFmTKSeXsaFYcfPdl6G64kUPyjsxYyxHjL+qWZMH9S6RAiAioZbK2V9/wRDc6PiATNy0ySBjg0J4Sj8EqN8pEbUXrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.dad3f828.0_1587775386687_0.22060958004791797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1bcdb47e.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.1bcdb47e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1bcdb47e.0","@material/mwc-tab":"0.15.0-canary.1bcdb47e.0","@material/mwc-tab-scroller":"0.15.0-canary.1bcdb47e.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed51e46ae11b69727c91d55f440b68af397ac10a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed51e46ae11b69727c91d55f440b68af397ac10a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.1bcdb47e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kr8EJaLeWK1zWCbJw28tD35cmQUdPbyn8b/OtLpbT7M9tanPTUzHhKcu1/niHN9GwjmjyjNsMdPVCuJfmi62Ew==","shasum":"fd25971f7de23b545b0e3346bb4b649653e84436","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.1bcdb47e.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep4MhCRA9TVsSAnZWagAAIGMP/1PHHcMyC4jd9j6t3SG+\n+IpGIdLremtIAhoWxsKAukEEg8HWhgXjLLZBoG6vqjqtjReLmqbfXxEldeeX\nZnv8G+2Cz7MezIeRstBTaKTxHp5yYWO2xfzaVsrujgr6OcjgvmPLqWt8e0Ut\nXLYE+V1rGSOk4SBJo0UiuSG3MHXmxqm9vTXDbY3d9dw9dis2wOl+zH5mHmzw\nesofxfUl2DLo4Pw7lGV7GMyVlMau8f8n0LwpKArkuyNxwmEdEryZ5ruWR907\nsk54NTnWUGMmV49oUyx8wUjUz6+1rdLG/bF08LegqJk5fMi4NpW86jrZp+4S\nr+OkChXKGBAfiHUT4uaj1qopt6DCZSjulu5y5FmOF8sU81JiVwY/ROfe2YlE\n7rf8oYqobwiK9/Tk/vhhkpNb/Xq+3mGtfLNIMdkT7ZPDynXMeF7cxtgi0hjq\na0X8ehE2DImWgvlyAakcYFfNVv8nvJiNJgDsELHdkeAQ1V2hEPzmz76ADXqG\nz1BPSkoGbiiVb5fqr5S9FHRn8cfN43+Ne7BLloCVEtPP6Plto/+Lypo31Flu\nmqovo2B4r6BdOdiORRomMlN2M4SbjUQ3FdVLB2OYUXAbSzgnZTgB79ERNEt4\nse0yvd2dWiky3hkhj06C5+i1T3fTNASo5TnKC9CF6luAdg1nuV6LLkAwHjbB\nchqE\r\n=AtEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAxtztjwepRQI2RsQhnRPccKRxrgNXQrlWNWt9WoD3sdAiEAuQqwuABEmIq0Iwb5/P6kO69mhTicb7+IyFMAbxrNtl4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.1bcdb47e.0_1588036384969_0.6199872002994782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.86ff1b9f.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.86ff1b9f.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.86ff1b9f.0","@material/mwc-tab":"0.15.0-canary.86ff1b9f.0","@material/mwc-tab-scroller":"0.15.0-canary.86ff1b9f.0","@material/tab-bar":"=7.0.0-canary.8540808be.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"61a98a59545d9e0b0fd96c928737677f2b981fb8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/61a98a59545d9e0b0fd96c928737677f2b981fb8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.86ff1b9f.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-KmdodB5XyhT1mMgxevEibnNKdGo4BiGNssVzQEzvM6dpz1r+YQTsBi01JbAdlpqURkazx6Z4T1iUVR/sn7a/Yg==","shasum":"61ac0a8bc44df75f49c73b7d52d9ba29945b5a33","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.86ff1b9f.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep5tICRA9TVsSAnZWagAANQQP/i2g0tdr6Y7wBVUHxXe1\n38vF4S3wBBUPtUF4ioYoFvUau5UYEbuy+Waiimy8kRsqLRx5yr6IsQCGyUR5\nd6JXuoo81keA1C+TIjBfJG9JkmC7GHUq4rpM4NDcMX6mA5YVrJesU8qkLe2X\ndj/iDw3XANiEZ5ISJ0bd2UYNfWRS+rPpXGyfSDQc2Bo7qcpm+ruO83uNVc/V\nIQmyib499/zZTS/eNLActSg/ranZomhPW2F4cZhMVDFh2GVGbmg6vyTCJmEH\nNMFla+tfv5hG5J7DX3lu9BvMWXK7K9FP3o3C1PWnRqGEQKqY3vAhxhr4yRsI\nInPoqzJX4OIv0SvPt8VgIDjHGcwBB+ciMnBt8h4hxemFb6I1w2gpDquEGbQM\ny0lJ2KvyMFQqpiRz9CxwYll1tw0cJwIOxbDE8TjJonJgaukl6kbheFzUD+LB\nXnK/ww8oMVAIHzA+2Sys+pBhrfFRbWkbrbcjQpfhN38brMqscQJWJ2DJGY0y\n5eJOxfObH64C860wQrBGnP7nX4pAe0TJlbwH1I3XZ3x/3eKf092ICnKh09yK\ne0C8vMqbti12JO0wkjCj+McNrFk1zF0lc4LcOKY2e/p6XxUG8x9wRhERLVBq\nx/XPQoXwhkKpQKnPL/zKAqL1j+dqj4ue6A8ZlncneviZOI75/8ZnqX6zVOyY\nDmDO\r\n=2Zl0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGXCkRXSDPyOIU9n6yjx+pzhO4gaw6WLL0AjSiVIMAqzAiEAmioj7qBJcV/wO6xrKtptBNDAfUiHC3Dp0m0zZ/GjFEE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.86ff1b9f.0_1588042568262_0.8345564867779454"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.54a86b20.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.54a86b20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.54a86b20.0","@material/mwc-tab":"0.15.0-canary.54a86b20.0","@material/mwc-tab-scroller":"0.15.0-canary.54a86b20.0","@material/tab-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8cfd732e72200c6982fa6d6fbdd6cb5496660a6d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cfd732e72200c6982fa6d6fbdd6cb5496660a6d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.54a86b20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-9+SAJWnCNZrnZsj5BmcpJm8dJmKyJV0dJum+NZ3Bg5PNuyrUT9+FfcgXLBOnNcjhC8wnK/9NBAlBDsdPHsiA+A==","shasum":"933b30c0d886511d87a288a7dfa43330757a7380","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.54a86b20.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJep6CCCRA9TVsSAnZWagAA2NYQAJknEMLEfL2L+WOENHGW\nNP6/Lc8bNzOLOwVABAzKDvOvSIH2RCgzieK8Rripl3YFRSqt75f2FHFDUH6a\n95M6n6FBguCXgx7Glg+ZZ4YePrElNgM2JQ1xAT5DtuldrWed3+loQA6X6cOh\nv8ZAQwTVD6aiEr4HE2QrKYHUL+cavFvNhivKNdzask8KznCqO7w4qtfV98Gu\niOxIGoGnRiz3tY1gEgRL8iyqrq/OoRz+ssOZcHHu6QpVDR5KXhbIgJ0HqBWj\nvBe25s4Jv8AyLoKIWq3Xgg3ID80mqTKfnfbMPXGgo6R+Po2LGRKFKGMdKt38\n65JEhmfZhYIxG5+QbTUcTYws/Yn3fYaahCbUN8ZAdoofDQH4NcTgKkEV8VGn\n7Nj7/NXtzi/Dt6avJp0F/3X418d846uPu3kT72GmMGTkQ2YPTe6SzE1lcYwl\nMZnnXhK3kGnZ7Y6Dpl9WQwj8MukLfTJa/Nsel15PSfjJ4yCrXefmRGreOmro\nH+lP+cnqr10Ko8+ODdzLkDbar72Vh8nV1Oq5v2OUcKmVvMNtDgAkZogz9BEr\ned58ygmnzpkVtap5zcTBTGPJDa2AtaDOLsCntnK98b5iu5ujC6EnECce/YkK\nRQs9/pFHeRHoeIZkua3R2vGkL5gXhxS1qiMLzJ115krbjybMdCuq4sJtXK77\nX/bs\r\n=cNmL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFsCrpWYWXnAHSH8sc+jZEA3IZ3BtfBtcH7mGa4RL/7VAiBPZ+Tuj3KsXE+pdryLG4+VdSHHRfRNENW5pVf8I/j2bg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.54a86b20.0_1588043905702_0.02098055820464584"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.938fd24b.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.938fd24b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.938fd24b.0","@material/mwc-tab":"0.15.0-canary.938fd24b.0","@material/mwc-tab-scroller":"0.15.0-canary.938fd24b.0","@material/tab-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b731aa2e74a3ad03e8d40736e169d0bebc8d8ac/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.938fd24b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TVptwfYwVfzCTI4lgMyOmWxqGlHLkneJadFCRSPFzwVvoHphKqcdBECKodQvPzRR3YsCdb+0qTlwh0C0DRDpzg==","shasum":"28c0fec1519e2c3492d8c2e483f15d1d4284670f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.938fd24b.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqimHCRA9TVsSAnZWagAAHjUP/Ag5OeZzylhFJYDg1fl7\n/UL0IrWf8fSK1fq9CA+fvhBT0N1z8VWgKkiL6VxFCTn9ZYHifKtyoCRRE0Rv\nzw2ujTpwAfjJhz2eKP1eOEONbbtsGvQPDPtqFREAExfGfMswpDOv6r9cfrMi\nER0LAObS8esKtXUwygHgrOMaerl/Ltalzeug5074btxWNcpm2am3JEXmGtSp\nDP21k6bN1xxSNUFGVGxTxjb/UjOq5/BrLGEM3+mNKR2CMU5QWfPZyl3y1LHC\nut1jMlOU9N+nsfsJCuhQf323pB/ELkstKubuOy7nGyG4A5pl/ZGFdv7Hh6dP\nC5xrvbwCQu7JhiXoAH1jP6OYmjlm0iwlPkN6YdxQm1940T2HYxCjz2txy1ok\n157/F4JWtQi52rs40BG8p+GM9zlF7DxC/vJzV6mIqEYRD90RG0zoFJe+rYK1\nmWtJlhy6tjzpqWM6WbW/d41XMb/3rWrY0cTIJ1QSe0mGhlsdaRr+rl8BhI2Q\nKQ6f5yaNp51oxHgyvC7dkBQhbOmKafQUtqCbXCfXQbzTTND0N14DzGe6898S\npUXRLC4zKbyvXUeAs7axjlux1kQ/j4289PwSLuNsPOmEzSdESkeyk+nmF+PY\nHVvpIs7vPYeyC8ASPE2DFIZI9fHD2FvMdVb8My8To3kS6d38jId6f1qQR9pF\nUu6/\r\n=M4Rh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBn8UAIP4BeRrIUdsw0C7OkVzT7dCUouw/dcEdJpkYcgIgKg0BPjqyIKL8gYd9Z54EGQC8CD4Zb6IXhZGOj5bYFsw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.938fd24b.0_1588210055372_0.6537138536496654"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.39e9a008.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.39e9a008.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.39e9a008.0","@material/mwc-tab":"0.15.0-canary.39e9a008.0","@material/mwc-tab-scroller":"0.15.0-canary.39e9a008.0","@material/tab-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2777862aa4cbec00918605f0726651658a2c66a8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2777862aa4cbec00918605f0726651658a2c66a8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.39e9a008.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/D8IT3CltrtkHLzM63Ozx5MuFQcfV6JsNM7xOx15y1+K+ioorMaaXaK83GsgkhxrZKrlrPk9CmpUdGZgxE0vUw==","shasum":"9cd41762b2ed52ba16c076d9946de1b7e267b5ac","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.39e9a008.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqjRjCRA9TVsSAnZWagAAXKcP/2ZlFduzaVKqVWJnqLJJ\nH+iiNGdKIbrGFI5Si4DBet2vfPE9/RbzLkl65JkTrTAP58kJ9SqbFO01WC0f\nXDI1pBCENOkw+k+cCzFujb7jc1yJNf9lMEe7cCYaf+GSJjihldwGBMQGXLUo\nhTAcN8/AKyMAUTNplRgObP67t73m0KFpecWwySHAluOCtjMHRg+uaPSNKypN\nuaka5bbP6ESacAHLqvH0JNkkUbKtOM769JOTs0cHTOK0CFDg/GStmj3NkMcc\n14unrY/8YxR/po03yZSUNJU20EqIT1G6DMuRVwX2PkKmJRdPT8aVFDNWK2z/\ncSaZWHndPKADb9mWUsMDPQUOYDSWiC3dCW1W4XvSALKSStVyoSb5et8bkszq\nPP7TO5Sx+JUABqIpSY2k4snzUdbx/7KbIApnB2m+EHDWdueuNIel0kPRkWZh\nVH1+qn8oHRL4TzxJtvd1OBHFiOwsAnza96RlK69c0uxxBLDqD0gpTpgio4OA\nIzKCeTf9KdrNj4O9Kbm4535DZOn4izpJq/9tJAnr/EnmEXtDDycYyS9B6Zbp\n9tpVMl74Vu9cevPxPOeNqcsjEbNuWdyLM0zJGne33dMVOZ8/K+aPiwe+AoP0\nq/JU+1z9fAmGgWYEm66aWEYQfj2wuPb9yGQn+SQae3tyQ4LugqUHjY0gvkOB\nI/lv\r\n=c9g7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGxhnoe6sBLbMw4eBbLur5g6buPxtQkT+RcDCl6mr2SpAiBZ1LVGlpoiEofJswZ2hTLVRSoYTUpXblHEk6zFH9UIAA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.39e9a008.0_1588212835356_0.6437885771786571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.f3b365de.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.f3b365de.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.f3b365de.0","@material/mwc-tab":"0.15.0-canary.f3b365de.0","@material/mwc-tab-scroller":"0.15.0-canary.f3b365de.0","@material/tab-bar":"=7.0.0-canary.28d32f8e0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b6d6f6d4a289f46197727279f5e776b79264ae07","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b6d6f6d4a289f46197727279f5e776b79264ae07/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.f3b365de.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-x408AIT0J71VrGEmQgC7l5iKUgMdI/QkV+6GweRPCsOxtaBhyuZMJZxfbLl9WaYyVLsei+GpYp9Y09rVdqBKcw==","shasum":"12e8968c4f575cd9a4389118032b44d931a91cd5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.f3b365de.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqowCCRA9TVsSAnZWagAAeFQQAI4mWw8dTO+qiGNMmc2m\nSdxqJKOjM0TSljkXSo/c7Fw51Mb2gG/gSELpMwCfFpzn9F8ZmDHUcpaLAWsV\n6W/e9d7ZGsk/wkTLOsxOJGB57m/LmVL6eLnDejgtSlW0MqEyUv4d/jIbfdF8\nwgqu30Hyhp0LC8qjB4282BzGjthlq7tvlI/oFCfRcTkgohiOuEUCpqizuEw7\nEaIXX40x8i5aElRuv8+qME5xXn9Yp4R0caYL+ZGkBWmbnATNSdx4anMHJ8tO\nnGlCr5cX4EG0g/KTQMQUtE6KY0IM74oEGqpQxeoMnk/QtDA4V38lH1hlPy+L\nN8nsk6WEn5FioB8R/LjULfIe+8KrkNlQlfc/94i/Yp8doN6ruQ6ZfrpSEJ4u\nfSaRXoYlCNR26LSoAl0YMS815e7ANAfHTbADCJ6E2ukEi5r9CpBUWhN6Oj0O\nDmDOi9X2LBY/FCGlmtDb59oQHb/9ja95nLsLa6NxejuTPlwxAq//W8ElKM/T\nZsmfK2uD2jDSb1p91Qx8r1aSR0z4qeJ6TYabchOTINdE2ShOnou3oG0PkNnk\nUMCTZqcbogILmrMPHa+NjDyG1kTWIFTf8kqOpReqBIYNQm6DmwSiKDu86R8M\nNuOMn5FSTo23MJzjwnCIqiq2gthRPHu8D8x0v9PmCRMZU4nJr2lqtZGWDxGm\nSGSE\r\n=YTI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2ju3638s5LPiajwjosM1SdLPGlrAptkh1m33Cw3H7+AiAqaW/QiJqni/6IZwoaM+KVv8CtRFs28vMEV/dPuV4B4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.f3b365de.0_1588235265770_0.08250016969080853"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.cdbdf807.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.cdbdf807.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.cdbdf807.0","@material/mwc-tab":"0.15.0-canary.cdbdf807.0","@material/mwc-tab-scroller":"0.15.0-canary.cdbdf807.0","@material/tab-bar":"=7.0.0-canary.b0f83d2fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c46702178e5c5a1096937d4bd70ad6f4ac4d1dab","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c46702178e5c5a1096937d4bd70ad6f4ac4d1dab/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.cdbdf807.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-flQunJU4rT7feFTGabXVyjBn9off9oAgZj9RjWBtNmBv5tTfLke98asaISIAtwMqYQq/WfWrhGquRU5mLFm/CA==","shasum":"dc2b63db2da94f770fbcd84bb304916be73e52c3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.cdbdf807.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeq2oPCRA9TVsSAnZWagAAsYwP+wd64CwJBXa918UwtPKC\nxtqJ2qNn9jyoqIAtSP/sKRl0tpWswrEWmodjakADHAnDB11ghSBKVlpvS8dc\njJfQnr3Rc/Rq7Pr+p3IcU/n7C1iHgXxaQkLJ3hQruMF70OlSzsrHkM3Ese1e\nz6cpLm+mElx+2AHJGdyRxWECP5k1nXtqoVrJYxSuo3UDkGgvXABxkoiUp1fG\nHUfnmTeh8Zyb+MJCe+ar6y7Iw4e4ANxMJsZVkJVmc1B4IZOyQaqSExR6JXXW\nm1Qndv3SiVn/1viHEqKhwmLYfWuvwjuLFw2N2xGOI6gvvgMpRSOA2tWXpgcs\nZ3gGZ3GfdDeq/1dS1k8VDgtYXNHBGHah05BrkWoTCWC3oWMGwelyi38341BG\nYDRQ8l9SU+70Alt+EP3kX6vae1hXjHgFuqurDtrD0wFl67hkcI1KuI3MgDs5\nIgd66MUK8AFnqbDO9/Tr7CV80vsBMPfhtYK0C3feudb5YKPVXyKWM5zeE2QX\nRFrzNBVmd7psfiDPFFVoapRV8RPVy3BzsKSnzJj09pvIxxHqB6prbnvumczm\nsI1ceCaUsX2i8y3TJmLiIrC1CNEviBQCGcv+jp8Qu8DZIP5uEFDIeh3/dr6H\nHeAd94R5fCk+SaUa4nHvDmi6kVCXLsXDcdJiXzfN1yPMfGs+kptgfPXM7Z6M\niVZi\r\n=SBGi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDwLtXZeQJWlNYJng7RZN6MCjUaM8t0+MiXxtrU2DIncgIgV3m2lAqG8OYp9HcAIeZQocILlWXoXjgE+iDQK9031cI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.cdbdf807.0_1588292110527_0.45197599707073444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.9995ae17.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.9995ae17.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.9995ae17.0","@material/mwc-tab":"0.15.0-canary.9995ae17.0","@material/mwc-tab-scroller":"0.15.0-canary.9995ae17.0","@material/tab-bar":"=7.0.0-canary.e59906a57.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4d5bd8b757cc94e00dda1cdb19761b283a15eeea","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d5bd8b757cc94e00dda1cdb19761b283a15eeea/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.9995ae17.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-j2LcOlxgaXmi0GZl0xQRy1WawFF93WwmP71boGKSmlGbjYHhsuDLPii4BzQuWuCQ89E39wjUFNvRpZJho/jR2g==","shasum":"f9b75e99c63c89ddd1113f3ccc7dea28ae5039b9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.9995ae17.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerG5NCRA9TVsSAnZWagAA1zAQAIC7tYrKrCOghqnD7hfG\nxJLEIB190uZ5SGxCTwIAB7SSxZtwttI/Y1yUZT/bO79BAHvFzkI83Pka7tS7\nPVm/YLzp8x4oaWleEicMGIGLm++T94Z9LXC/w5jzdq6VQYallq82Hl5mCkRn\nfF2rvr7od8+3Vy1tJVU+cebSvkRwUQrGRjIcK/rC8p8Dsgk1MCY2ga0vRvOd\n92yuKtHfu+TCcSCDmqe8jPGF00Xm4X1q71j+tmlE0Ttk8PTr6KCej+HIslWz\n1CdvLzDAQkD47SwImSn4+6oB6BSo7lqmIYN+6UlUcA+Ghb623V8S41qgVRkv\nldY9vaoLl4b1RAxwFCb+swslmxx7zZQuqE423AL3DxqqJTcvht5m6Oc5wtZC\nmxy+DxKJxtva5lorFKFHtzlfkpHCBQEd2GEPrc1bFSanJAQiyKCvmETfw2xr\nvfKT+lNvMcT2YXrPhbv9ctLPVMk0WfnOJxNEg/pEcfBFjc4FhEpE1Uf5RKdB\ntWEKUYwkogqbnxwfmSaBa+rCB+vyU5OQwSQq/Qx9JtRCWujKukrGVzWs8XnX\nDGF6ATmcquurtvJJxn6O00BT64FrV5jd583a+L2QMI3ng5E/lQqWQH5L/+95\nGg04PXG2a4Zp1gJ9cpK5ZIxp4Id2mQN06PQt+7Sz24v2D5ousPKTy8o6Fr5g\nl7PB\r\n=Pbmz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGWF/SJ1b6EsZSvA4xWzO9dyF9YKo7J/AKOSVaxPfcQfAiBhIJF1tidle6o70AtN3vwFOX3xkBsMYwUl7bBK/9193w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.9995ae17.0_1588358733241_0.5051512738156945"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.457bf035.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.457bf035.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.457bf035.0","@material/mwc-tab":"0.15.0-canary.457bf035.0","@material/mwc-tab-scroller":"0.15.0-canary.457bf035.0","@material/tab-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4174fcf7d0ec013419d2f97c6a615216cacd4687","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4174fcf7d0ec013419d2f97c6a615216cacd4687/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.457bf035.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nEBXk0GxAE+IsrcaToL4Yg9eXnQpf9mbZTPVcSJIIiVeDIC4gk59Buwm3UaXmvzzeyObaMzSdUfE6oytd1Ke3Q==","shasum":"5e60b10451b12b9ae02f5f339005e39bb69745ed","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.457bf035.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerIvFCRA9TVsSAnZWagAATGkP/3aykhlMGmZ2UrrtYC92\ndIfzdy5Egihb/+LtsalJJbApJqmMuc8QYGb6/LaCrAWnJJdays0aGokkP4DC\nuQ8rKl+2m2JU1MWssV5qmpB2Lr5GqoEluzei36yAexAOfv67P5MAtobwJxcW\na+B6v86IdKlVmWi6Uuh69nEZomWugTnsFveBi64JtMDCLdPmlPWOB4uRMXN4\nz4oYs9xC5HMu2Pw2UZAS5LAQOs6+RPtrR4E0mQC2gB1cKSIxMaEYDkI8YLIV\nbsbB6krxJeg2a14RR5H3MZPL8yt3XLat568W0u9bHkFmR+k4/pdgTv3snLN6\nRBLd12anbBAMZsI1Un4Yx0rF+moTNHl7hCgvZvFVeqrN5WmWfK00MB6pSztA\n0jZodPAwtUxF4nyqvXRueDqxqg5Ak60OAUsL+FAeQnPaz8EQmQJTT8QaHlaT\n500errZhR7PHTV3hpFpNq7ZeiZZyGxl6w4iiwDdzmlj2vrisPub1xK9q6Jzt\nF7ZN66oMARQT5xP0LRdQwkY1Kn7Mk9ulEb2+WLr7Vx7AP0ICCYZqlET1cyOE\nglBuUxQunZSJqh9CRCVO9YbfXsEC0CLbz6a16XSPW48+4nRStI5ikZxJB0gy\n3/nduItuHTfH7LJXbWpCEZyB5hD6KsKMkTIcqYMuA3ua0poOvBQfIH3rGWO4\nCl56\r\n=FiKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBlM5lAr3Vg09MbZmbqxhDqtmVfB9I+Vbce0wNp3FH64AiEAlsUhhnMu7thk/QgX19qGUV6SnJoAygtRlAI030agrqc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.457bf035.0_1588366276708_0.6328734947923627"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.2381fd02.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.2381fd02.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.2381fd02.0","@material/mwc-tab":"0.15.0-canary.2381fd02.0","@material/mwc-tab-scroller":"0.15.0-canary.2381fd02.0","@material/tab-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4e8207837776c4f108fb86133541c49689664446","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4e8207837776c4f108fb86133541c49689664446/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.2381fd02.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mTorGfg0CL3I9tn0G8q5VGl2O45XbOWT5CeKJW0um1SLinCNETbwo7tKzKlx8NyH1dofUXDeQpbunzb8F/+CGw==","shasum":"42ddeec0405c4b1be001252c08c9786ef12544e7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.2381fd02.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJPpCRA9TVsSAnZWagAA7FkP/R0KZjGMmIONZP3k2Kf5\nhZi/T2nF4LFTae0lJBZp798eDEADe7fUZ/g020dr30XSpzU0oPQY+xTcXDX4\nxCCWQtkGurCprB1yoNkPZVgu63UDDOAEElWuN7D5cir4IVf4gCozUjfMpYOT\nQncZthIi7HOMS91aPRYWrkPY/0stTIzye0G9RpHe1L2Mbla5RBtBiTCPfIDg\nX5WLLq5FkKlVOUlnGYb/6TAHw9m7XxIJ0Uwn3Dz1cc/HXNQUD1MQOVhjFEmZ\nUAtn9ahAi9vbcJdZeonEOq4gmnLCYx3C5fXMXX/OVYDakZgtNERYLYxrv4CU\nPw7Bpwqh1EoGiJ9fOQmpo37BAdmh3W52ri94Tm5IqQ1qkROxcSuBQ9xlJgkY\n34o/mynirmpu9uwleNuEYm1DFdp/DRErsmS4ETfiWyNiOcGfMYRDIAZ6su5+\n1k3S01GNQ0Ncuu/1A/DuwJou4yB8xPLWChDqDsWAfRuroAkjArdOE6kbv7fe\nQIdr2BgXHMuieu+KmDh+iZX3hS1ghN1wnr176WVqZn/QHRJ+OQYm5oMtRuF0\n7bcdyuH4c2ckrTQHTCENxjspto+D8YLT9R6CbBwyWgORlwttr438LYWS2N2n\nsrHK6A+nGLj9fowqpFAdWFLeuDDSc+LiUHhxqZWNEMVTltO3/iCvg568Tukm\n2XR7\r\n=qoi8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLoRLoOnsw/HfS3VzNnlEJIyIFfQx9wu9NPZ/MvksPCAiAWPVDCIRlPspMwPlZSNv5G0IsBs2bmhOt0ZW62U7Ogpg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.2381fd02.0_1588368361047_0.16157219203648676"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2ca9b57.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.b2ca9b57.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2ca9b57.0","@material/mwc-tab":"0.15.0-canary.b2ca9b57.0","@material/mwc-tab-scroller":"0.15.0-canary.b2ca9b57.0","@material/tab-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"98f8c3a13f6577a5e1ccca480ffe483c91183a7c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98f8c3a13f6577a5e1ccca480ffe483c91183a7c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.b2ca9b57.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-m/YCOzhON/GhqmrFUMQ0F2fneXMjCNhG5RGKK0SYs5MTNBehmyltgA0NTo1TLHAX4ENEEN1oYpK+BQNMUo6WXA==","shasum":"311e7309cbb3f7653ffcdd63996b6ed9063f1619","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.b2ca9b57.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerJZnCRA9TVsSAnZWagAA2hgP/A/NuHZaZx7SjmjfBbW9\nNlhJy0zC3J6KGH6pAjVYnAFgJw0h2UyBJV7rP4BgYwtwV/yEvXUNIjChKv0P\nTQv9eY3xzXe6sUM4Fwnu+LMlqtczSJkeI2a+tuGULhEVTbNAgnYcxprE5Fus\naqZMPKOVakXwJxnlvhggJgmgleIpNNoNGxUyZIOrx/WicPHMQm6CjK32DI6n\nk5reR+JNxGK3f4HVGMSYLpf1kG8tDACpKPmcIqILhulyjXn3Qk0gqATeiF/1\njauq/YvorG7OwmD+bWbrNjpiVTwwXZTjbH3oam9EmL6Y/yIoXFJcd+0dE0Nb\nI9wjmHYPCyE4D7NQAstcP8hJVUu8B53iTTQABhK6chjjiq/A0JA4b0NjYzLu\nB6rLl8n0N1sGpvZ4n78+067rIYsDhmzAuYxh10DWzJ/uM6TzNk5qfK60Er0C\n+yjAie3aiLjcQHHollRqLjCN4DevTaQdV9wtZD6fuVQ9mJUPoZR2ffS4rYzC\nLijbJV3Xb1pZqeI8pYxMTfEdIuLBZ7Z5FVX+W4Oz47vyCepCRJM35JSG08K9\nsERA3EAQotg/LmVCpOkTdHovlMfhda0QnmHXZ8t59aop7eLNs3amXxiQQrf2\nOxYM2yrXOq9vr2XrwrlcV+6KdY5fcbzxSDjX4yjaFTR9OlYF+kz9N17h+5gN\nNm2v\r\n=9wPd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzdalEV/YCXjKsoJ+KxDIb8sodLBOXogrFRIMjDvRTLQIgBycg66V9WKa8zOY5wh2Ec+Ks/FPQ4FFW/Fj+yMwO10Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.b2ca9b57.0_1588368999015_0.8496050306562484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.b2b088e7.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.b2b088e7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.b2b088e7.0","@material/mwc-tab":"0.15.0-canary.b2b088e7.0","@material/mwc-tab-scroller":"0.15.0-canary.b2b088e7.0","@material/tab-bar":"=7.0.0-canary.15d65448e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c524f04088895074106127ef3584a2aeac09b189","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c524f04088895074106127ef3584a2aeac09b189/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.b2b088e7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s2CbUO8tiTMzmc4T+l2LhSnEHamXc63oP6bcmYCbFcWVDYPb++MuuquweRIFDpkKGULdPg3dBG000+xrfFKnIQ==","shasum":"1b053abee3862dfe47323e1051608275ddb54894","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.b2b088e7.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKPdCRA9TVsSAnZWagAADzQP/0HKw0ePyCyiANwSYcJz\ncATRWwcY3q2Slev/Zg1CbfKoxZBaltMcyFUkGo0pDXzsuzHtpS0s0Ybot9uY\nWntG2iAnqMFUDt9ERpVfHw1ZZ16uzTabJtnNfvowZZYBQWdzUPi9jYzAUcuK\n8zkJMNgIfCQu907VRL6kFJOcvvSuLgxs2uLsdqRj4H5LgE1PLzFjc2+3zh6F\nhEnf392F6z0/Bhoc3KSywRoZ9nll5e00h+o/WsIkmLnMY1ba9TDIXiXT+O1t\nclMTRX1I8ZOqzTPRBXEK3MuGJHiV6JPqyDZs64+KkFkHbVpFOtFyd05P2Qz9\nFzXYGNALcY2l4b8eNlex5gWp7/+P5FyAaSBcLjZnM1glfRiLvRrMMoCueiSi\n9AJ1AlLaJMpbt4g+r6iHXC+SiK9n91uYoT0MlkOEFnqZTmGs56xdHmj5GrGN\ny6dKOrgLfCcwFtp5P0Qm3Fr0HxzwifnbiK7Ra/UevM6XtdThgZDEGcjR9JcP\nbwJl0U+6b7y/sjdTqPLUaFydVRhT5R2+2pCSRfQi3AU/i/SLu5NTw2jPIfMa\nr4hpTbNbQNkJQ1chMWUXGcPJh6kw9VpNTy6y0CguPoHidl0PC6F5P37oZ+u7\n6UXkZwE1kyrt1fbPSR3uJrRIxljOyUd6SelnsHa7CGo4/mSKyhfCI94QxQO4\nC+Rr\r\n=icI4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9VL076yy6krZLHZV+1/okymy6b8WV58fIvPiIvR/8ZAiAFyPegZCU9aje/JbE1P65T6Fp+z816f1l66dYGVZmuPw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.b2b088e7.0_1588372444690_0.25182244750465665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.fdd8f69e.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.fdd8f69e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.fdd8f69e.0","@material/mwc-tab":"0.15.0-canary.fdd8f69e.0","@material/mwc-tab-scroller":"0.15.0-canary.fdd8f69e.0","@material/tab-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3888dcd836699affb59b98e4306c2ac03971ac4c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3888dcd836699affb59b98e4306c2ac03971ac4c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.fdd8f69e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-WEgRDoOYo1FjTdfymcK2N/XL3S4s+C7bIw+oL8mHD67JI82AbAcelQ6kt0+HBs+HLBOSKsZ9YpoxYQWv3lPoZg==","shasum":"2c284f03a4d39d41a4767cf4921b0ceeed0748fa","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.fdd8f69e.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerLv1CRA9TVsSAnZWagAAfpIP/ilC8z0DMXY5cKa17po0\nMvXSQLHNhT/NIIRyMLsu/oa8HO4T5w/pttfUYCuGJ5LyKZx/2jQw4jAaWZX6\nuvKrpY1FFSLOtH3brh+s9lWz1VA8cRgthZSZi5XX8JpiY4RjwBNrm/4Tvrad\nLzKMwPgykohBAG0qFksGBT/erIkoiqx1xBblaJvkO3icADN1/c72jZD/aand\n5TGeivii0c1EBF2ZM1NzmTfqAU/pO1ElaONVs9ybc42yMyeRWBSXyrvTRhOr\nR401kjEImg5vAkrhFYMFptL/mPR+BvQH47NSbn8dQwrO6i1f2/Ak4xcqRGxb\n8K2MznY4G0fhE5WYfxrqg94BtnyOZZc+rLcrwtmjffiQJEuzKFwcyL1XGKEe\nk2Nq6crl2qCDD1c3yjZ4o3KlyoJtMJabaHsshj3RJVeTURBQrUQZgVCVyAm/\n5irNXgnEEJi8r5zUNgpXyW6sUTAuwIqwcepAwSqO7y08+y9QLPTk0RsZgaja\nQzk6OeZ1octIUCdoN/FI40W0iCpIuQSi4iOnvtVKFtPOduBb/jEX/S1fMFUR\n+cF2FwLEIUnxX8GYfv5q5lBjhZI+oVUP96I3IJgphngIMAMAfqqgQ1wBnrnl\nTDGx/AGZKxbc9Y2qXFY4mVGblLq96B6Gvre0hTJDoT2wKu7M4i0uG3NrcGQF\n5Z8B\r\n=mR+k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGAFMouTRZaL4pNkOc1MQwW5+1VL9WsGBqaRvUjWllmOAiAOhTpB/vRXiV0xggMBHl3rnahFlpvuzkGRS1EMqdzdaA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.fdd8f69e.0_1588378612728_0.36333834350199457"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.730f45a8.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.730f45a8.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.730f45a8.0","@material/mwc-tab":"0.15.0-canary.730f45a8.0","@material/mwc-tab-scroller":"0.15.0-canary.730f45a8.0","@material/tab-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e4604a16ebeca9fd76a4f742d3f936e83aaad680","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4604a16ebeca9fd76a4f742d3f936e83aaad680/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.730f45a8.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-OtCc6xa5Qvtz/Kqu8/RdGMZrGDCo+i6LNZ2pCp3VELXAyvo/9CeG7QX6934AsoK2S1V06AyHkcSWPqwoDTFoAA==","shasum":"97bead94cd1d436f32a65159265a1c2e051c4de6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.730f45a8.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery1dCRA9TVsSAnZWagAAKUcP/iquNgWvWvplw5loiBON\nraw1rMeZ/M3r5B/RVZPDGnr5evWiGdgB7bj7dZur1Q7iH9hyKyFkmmRg0uI6\nG4ajbqi7a80lKF8EKhLlmERJRsIhPiYeuURwko1p8Uyzt7WXEpZ3WVAuUUc7\nheNDLCySkDWbrk+EkPjR20MwDUzYVcSA7DtSRVFZpeB9kL2a5r3OjQffZVvk\nrEp5RxRra7a4PSHofbuS+4Am0anIMjP8ZPc88vvUIp4tM/NE/sXSKJIn1j/8\nY/6zk/x43uDq0V0eBiIH7XV20rL5mcxNKWLCcrrRcu/VYhFbMMr5uDVbCTEP\nIo9QKK99mSjvgmB5Ux8K6Zbm1nFXentbiqkgJLcNyGpAXre5nF3HURbL3dGQ\npkrGryMxZxui3eVoaSBD1Ld0Zi/SmVyOZuwiM6Y8zNIm7/4A3oYBawX2GVlP\n1/Vkw3OUmKdUAk1Vnv9jICeocayLaF7Qn4Phf6Dl79t2MoBPbrnzN2CYatH4\nVimE+YCHvV4j8sDAF/w0my6UZKcve3/siqVJWduBcWcJqAGKE98m6y06hYbO\nIDUJq3FjsVaykPAZ4e1bsOHqLs2cLhr5QMC2xuHXUTecFf5i4783fzkp6jdb\n2QmPn6vrFsf8jgkjFnieQNFjSES0LzOPKv4oaPNQ9RIlJcSlHbrATBUVXJVS\nFApP\r\n=JUUC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHwZIamNmKgZ7bR5pIM2ItIuDCl42SZNIS2PvvK09GiAiATUTvV+J2aLJeYt3lc9UriYLTfIzqwcGDUXsXmbv7uTQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.730f45a8.0_1588538716801_0.1081948188036066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.4219bd20.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.4219bd20.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.4219bd20.0","@material/mwc-tab":"0.15.0-canary.4219bd20.0","@material/mwc-tab-scroller":"0.15.0-canary.4219bd20.0","@material/tab-bar":"=7.0.0-canary.142b1549e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0ea0642a3b7fcfd78e46e68022be39ccf7b5e68/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.4219bd20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-gT9SP2IGhbk95/2MZdXYul0dNINGG6k9FClrDtohZO7du1K355L4t3F5KUX2EHw3r3/6Opm20cm3TmPTXUb58w==","shasum":"839da023bb2df8ed6aa9d0bdaa68a748dd73d324","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.4219bd20.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKYTCRA9TVsSAnZWagAAvvkP/jPNrqx+FedOzWTF1U3e\nyg2gnDNmd8I6mDBrhrgeaPHN282A0O567rv4wY8IsV4FZ8aGCeBtODjEHXmQ\nU9ty/u/ng8d77UZxr2Qpf3lXfK785fUOEEC9GP3hDiL4v18QU79yNMgd50eN\n/LfRpjBGrN8cok1ATSb9WxPT/5DrsmsIo9UYnb2lcdWLU7qW4lnrQdWL/B4F\ndYKzSWPhOruBcQCuoQJo94R7xYkNrQ3hcEQ3GK+mn2NAVL4zijiuHYEVrP3O\nu/vmEfVCGKqqFNKgbjZ9VzyVUfhqcXTbYUXTLCR3FNL0qMaSY4e+F3HzCU8L\nwEp/8n3CVtMbNzuXYiXK9qT7jcwCbP1W7uTCRePMD6RL8/yhh1mgTt+7Bd57\n7nn3+nkDvdqsn/QRtXzBUuTus59qEGbu1hLfrSZjxTS9r0KVdWj/Eq1dcT3F\n+VhZ+/f6vpRvrTbGj7yw6wpWL5hWblkm99IhvikxCgVqyOwo8B6JPMmr21P+\nVt77PFkaTQbQwmVgWdv/Qf83kdiIfrrmo6jwhUST56vU8NO0jFa7FmaAh69r\nA1+3ulBELE4ega641A60cHCRHOqvB9cQSPSORAH/9sX1D+AugYr8QWUwGVfL\naDlRsK2Hq6ar8SteGnZzrASFiSFH3W4wI4vMMSS+eGb8/XX2vSrf+npNio2/\nNn6v\r\n=x4TF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA86B8DGOrFvpaam9i5KNBUKwPFYfc30D8l4gn70OXSlAiEAiimfAInGOhtRqRE+PLmQmnSKjB6INpenGeC2E/2YeWw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.4219bd20.0_1588635155381_0.66311212395633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.1d83cf6d.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.1d83cf6d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.1d83cf6d.0","@material/mwc-tab":"0.15.0-canary.1d83cf6d.0","@material/mwc-tab-scroller":"0.15.0-canary.1d83cf6d.0","@material/tab-bar":"=7.0.0-canary.03dec929e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"72586b3b03638e183dfd5440f006b405468a37d1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72586b3b03638e183dfd5440f006b405468a37d1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.1d83cf6d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vs+biLXxepOsaGZn2e3XeBam69Qwb/ZEH9JXkMwSJkI0TomwYCcYg3QMut9N+Of8ySW6RZlFd8Ju8t505Dh8Fg==","shasum":"624b0071ecc4b2290b0d4db064062dd2591eb523","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.1d83cf6d.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZ6ACRA9TVsSAnZWagAAmPEP/3MEiRmvYPQNx15yM1+7\ni7lCTT/TUq0v5kzdqVxtXuST2RCEGHK5K9XL7Qv4RcvLrW8hem1DA7epB7HR\n33znVMDINSucDpZXkN/2ZlIKCrOb6cIQJzlms+RjIpTcyGj9wDy8hEhduJje\ng/SyiNdyq07dDFWWVKVvqLQM8neHlaO8ogfFrqT0RRDU9Nkl1Pki0Q8U1rYq\nnnNXMR6b3NYJvX6vEgpqC7MHLwwLPcfJ9H78P1Bf1ZKtzRrHmxjFmkx8pmAU\ntfcSSXJcOhkIzwyBw5fDIUt/zJLNq8eKYSMBrYhDip96KLpqsL0vWhxGhqD0\nuh7rH99LJwSb4GZFiEwIQhJBnuK6xRM3CcWwNr+SEK/bQm/PV8YDZfMFD0g+\n93LSel+kYCQARK9qUxZar5cweroFIlSOS3m2kjHzm2CIScrXdrBMSJy7fyre\nBliNwCkMazFgBWkcPsuDEOuC+Vo9zyIVTfDbJ+kp91fujtZsJh3IJ7lioYAD\nKJvrvq6sSNIc1srFL00/SkrxBsczEsB5FdrV+9MjSqOiv9WLhGzvF6t5iAie\n/cXF54QUcSAPA6NBe6UVGgCIE9T9Wjm2GukenD+K3JHcegg5CRBpDB3oVB+v\nIsJJbgLoqL23x8oEwClYsKjcVD9qLwGg5LGJkp1zB//BnQ+fwgHeUGOu+lay\nV20Q\r\n=mGEH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCr0K8qQeGfZcqXKzLKSlkUacC4XkDF/DeYofzSL90SNwIgC97pJaU49v+vGEiQ74rRFKN+8YqcqK0zN1ZnWViE9B8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.1d83cf6d.0_1588698751830_0.6935749156697562"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0-canary.3bfc63aa.0":{"name":"@material/mwc-tab-bar","version":"0.15.0-canary.3bfc63aa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.15.0-canary.3bfc63aa.0","@material/mwc-tab":"0.15.0-canary.3bfc63aa.0","@material/mwc-tab-scroller":"0.15.0-canary.3bfc63aa.0","@material/tab-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"00c84910ddd746dddbb2d651a4fe51c784dc78b1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00c84910ddd746dddbb2d651a4fe51c784dc78b1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.15.0-canary.3bfc63aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-aw9TThzcwun7R0AH6efwRRQSICikTOVzBYi1HXjW8jJ7Q58jbKk8HJaVDFWfUn2RR90fqz6yzfXlNVDpVWTFrA==","shasum":"ca9222fdc9f88dd8937e21e9ba9fc9753603692e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0-canary.3bfc63aa.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesazxCRA9TVsSAnZWagAASDMP/2eRXsCg7oIJ5PpC/pHO\nSKwS4UCcuB/3woZRm+csn1kctEQxI9kjl6dtPv/pv6Ry1opYyp6PZsIhMWzv\nqqfvDQG5DVL9dyorhXXQH53I6locNjlXOPaNqat0tEPYVposlvpSB/J4GQ6N\nQ/kaWgNNq5V+k/tyoo24dygeTa/OljJIqnawDFzY0f9w/K0rDVmoTw427yWL\n/RCpKxA16f9a3Q0YCO0W9tZaQujNnbTWaxlJWdasu0/thswdHaompbs2HWnN\n3kXJYid6k0K+wZyaQHidujj+G06R3Lm/OPDicDekiLmI2AzefmmMuAMAThxB\nNjX4I4gfsHgaSmhFNsZTQ2BlisMVHQ0eov+9iw6XJ+ooFj0zkLmg2WggGx9H\nGfWSjs2mlTvwd8jHWNwp6R6rL4MpipJI1U+aUKmUAsxTWsnnrqIp5uBndyyk\nsE2pxlZuYR+WefKqbJELlQZBaIM59NvyHIABjFqsd2BsVpy/QFUZlMgOUeqL\n6+2tLqXaV8nusjtIoX0cqkJkiuAYLp7y3Q14PnTuOyPLN90j4r2VYZBrLmxN\n6Z8fXKE2qQfUqUTGI1S/gvF4xj+z8Mhpo+lzrjXJmba1uKKTbEmp/DOAan15\ndVIj2Tojy9r1fovD9DSxyh3HYgsqSfBz1HndtNi3SFnRg6Tf8a1Cvx+ObeFW\nJy+D\r\n=hLvS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwpCtNZNdBhOjiG2nJYzPrSXldiWgDY09jCIgYt25yTQIhALEF7ohDyGaPINk/3JJqGYbirbOnh3moFykARbQsSikG"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.15.0-canary.3bfc63aa.0_1588702449460_0.0219203902900047"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.15.0":{"name":"@material/mwc-tab-bar","version":"0.15.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.15.0","@material/mwc-tab":"^0.15.0","@material/mwc-tab-scroller":"^0.15.0","@material/tab-bar":"=7.0.0-canary.d92d8c93e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"749d0b52cf7911d260027fba833a8a291177ad32","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.15.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","dist":{"integrity":"sha512-wCPJSzfaefbbcfMzp7l+F3IfdwThWDinJgImu2Lbtf6cVep60NqbzFIYO3HpIgwag7NthoY+E3lb2GsAEsKDSQ==","shasum":"4e83e712c834453a1d8ad86444069d92f1f2b3a3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.15.0.tgz","fileCount":16,"unpackedSize":53935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesepmCRA9TVsSAnZWagAAubAP/35/m0G7PTFXiUBJbxXU\niGXXHSEuDHKx3ksiIdOe+TBveqEocrNOEpA2Ecf98FxHH4VJaHLhLrK5q6UU\nuHlzLoNspyu9nStBVhdsc9YAKgnRncDFQTgAFVqiA6iT2leBc7LsDo4f6/DQ\nGW9aP07pTY51rodp/U78KprKHfbM+Mpa7Sj24M4HehqfcvzJDho9mlw3y45j\nCzTt6yBttFa+XwMjweMAQ5ARFBsEov6PkiJFgDTc6V+Y1e99UTdZQoSYFVKi\n0EgGIdJUnulK2iMEYZXdDkEP6lCadUhyyhls+eCpMIn0DWfxtHdETW05mgRE\nc5+MezmIKg1Ifzn78ya2Wg5uGQmr8cBAOXX4CEWWOg27ZHaAVR75EhSMRKAn\ne4a0KrfOr2Vyi6LxngPk9YeDk9mtpCzUv1vSHv1E0AyXDXc5gC/xpA17RfU4\nPHy9XViU7g7AzmLHDK+j6Drj25RW9p9bFfX5ahH25qe9FaMEyhC/dk5piqVE\najYuTmtSH0B2yA0FTb8/qzohN4Ra5tOshUNrfnyBidnJ2eCrE0YkomWPN4wb\nX6BSjLoKhBJ+Is71OJ7+ISIffJ7QOVOoNapXRD5Nv2ZbBaXfll+763dkIqpU\nDytYkdTighjCtXPv6rNcCfLemmMkZma6CyGB3ye5U5qLDUyw8E2eZ9nKd5Hd\nGN53\r\n=1Qxp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICv1Jyssi2IQH7fWU2cEo58vceo4fe0nTgAawOAJdPwQAiEAz+5cqXXI6ubpEXJgYi162F+z+MBMk+lm35ZfigR+fYg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.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-bar_0.15.0_1588718182458_0.9571270730934922"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1f4e3d1c.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.1f4e3d1c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1f4e3d1c.0","@material/mwc-tab":"0.16.0-canary.1f4e3d1c.0","@material/mwc-tab-scroller":"0.16.0-canary.1f4e3d1c.0","@material/tab-bar":"=7.0.0-canary.8135cc085.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cddafa9ea64276d2774eca727578ad51fda9c366","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cddafa9ea64276d2774eca727578ad51fda9c366/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.1f4e3d1c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-v9Eaxk22LRB6X6bKSzlhHNQ8WNQR/abgdYfsz+Pyi58FmdlgVweMb6Jx7igxuFlmfTgJgk/EEMujSHpVZkSIiA==","shasum":"50e880a7dea3d22ca50da14a589ea4817014921f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.1f4e3d1c.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszSFCRA9TVsSAnZWagAAzPAP/0Ej4Rilv9ttzz9Q1IgD\nItnaWDhQcqRMMSO5xYhHglqxKL9YHBAHbtcoWsel2NgF3c24OPqEl9v4NTRH\nHUgDynKLCsZS6p7i71WyobSEADSHV9KFZRp16+r7kHDjjqii6p1ih8zwlkIE\nTpP0gyisyHilOmZ6ItoD4I3lZqELI7GWcZWGSf6D2W01aGSER0Ytjl0owIhU\nCCmp/MYRBME97IIxrabQHk4Et2jk0/Ze3uEbPXuWsqT02iMZ/lBiHbosmvaF\nn/gCdi1mrgfQWWLjiTSgA4IQV55aCz/oGD9Z77mB8RcWs1yqEe7JZMW52IUB\nhE1o3XaNORlTmCP7zR4kYwPxDwoRoOxlCdcDTa4foHVx68CNlwPdTZHjNxU+\ne6IfGH1myS6YXrOSYU1O/6vS2+nPOUznKEQmzpFH41irK9PKbGG9hiibJ4Ip\nKpvPyshkRFjXlwkgPxX6bfYXQyDH9xVh7jhntOH2fFX4DaLP1oedRSf1XYxJ\nPs6RQzG2Vqh9AmtiLFWajGXEUSVSDMb576hLqvkaO7qQb+su9H3mW/13Uf7x\n93oEIBp+smeiOs10WdrYMYU85xIJw3yT3G3hZqQLiXY7Nn2+Pd8K+xEDl0rY\ngbUrZNokgvOr+eRWp+2j9fl/QS7TpMY/eGbJpjucszsWaYD0r7/IAAitURwi\n/JEd\r\n=wdym\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEX5JcIz39oe/oRgqyV9Z2OfyCql7P0/YXDml0hPqoAgIgbHRsOxMSNi0jc3MNUOng6HaHAUYoiQMG5xPvUMUBgtE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.1f4e3d1c.0_1588802693101_0.5819830559547268"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bc8759d5.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.bc8759d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bc8759d5.0","@material/mwc-tab":"0.16.0-canary.bc8759d5.0","@material/mwc-tab-scroller":"0.16.0-canary.bc8759d5.0","@material/tab-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bd62828e2f7b66a127bc0ab165f32bf39b79fb0b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd62828e2f7b66a127bc0ab165f32bf39b79fb0b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.bc8759d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-nJQjM6jU4sqgymWq4dN9FSz65jCD/OTXzpRGNB1drehBgWRLOrF5lGZY1b2U6tYANy6RLiXs2YGkOm3RPy+kBw==","shasum":"714594191c51574026e8370572eece86094ea453","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.bc8759d5.0.tgz","fileCount":16,"unpackedSize":54004,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetJZ+CRA9TVsSAnZWagAAcE0P/1kbTW8G1PmUGzjor91F\ntBcGSIZw0e+2Mj+lz/qAAjkBWKO81HsDXKpJFoa069+5iDpQG0Cwv8hWkyE5\nGROxHLeR3ALR/f3vHz2p2hTpLQR6gZVmZZ429t7j9pRBQouW1A8m1MJojtsE\n28PDYlL1WrtqxzxbCTf9/09XbNGWssEVLM3CokA6RsfPjB7lBFPrDayvFtlM\nkOFV+Y6BiFGyyljKERkfRtYOfSh5niq1u9CrwOLDPHo7D5yNHBlVtLYkmnPn\nzD42p+85RpMvHysV9G7d02vRCKtDNQCUGiUx/Ub7//QCmr5k1K4z/4eXS+Z3\nBBMT6tt0zPIS0wibaRzXlPAIxGIUdLxDfhTkYtEgPlt4U6i7FQESI8saCTzc\npZqYnMP5FMSRlVyFbFcOs5P8ZNMHcWGgKxh9jWXojb3CpKRFLFkJHH+f/TVo\noVRMRfnII2/9IJfOINDoRSOixSqt+nA821HNdFoefzbJtvd7eBdP1CYF5U/v\nqqWwzAOcqs/GB+llVZNYFqoIEbPc+yb6/IVPgkvnBm7J0cgLwAZVjLUZLLiq\nDMQqkaWPA396xu+1tRRmDmTT7mmxHcsGKibprkd1evfmta9XfLV+66HQqQUB\nZ2TX9e/vBlpfSBv3GQP7EVlGwtgbmUBLkSghcWUW3QcQ1cyx+LOljH+aNrYZ\nP3rU\r\n=KWgn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWajX/hkR8oiMQWxqd95BdmRfQtQvFPNWmuovFW8yVVAIhAIFvCIRZVnsa3KzQvzfxqLADNoWPklHxCEN8oletcvzZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.bc8759d5.0_1588893309676_0.25427960529182947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d1379acf.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.d1379acf.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d1379acf.0","@material/mwc-tab":"0.16.0-canary.d1379acf.0","@material/mwc-tab-scroller":"0.16.0-canary.d1379acf.0","@material/tab-bar":"=7.0.0-canary.f83e00898.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b322d565d0668b9f1c4054abde8984cdba4ee4d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b322d565d0668b9f1c4054abde8984cdba4ee4d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.d1379acf.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-5EKH+L4UMSsVC4y7zf+Gi6/nH+/e3lYExoxsconTXBFZO3fTEeZCLQ0AhyXwHRCGxukhbTE42SUF9A06WsPSfg==","shasum":"7d4970314d1e71318e59f84209a4d62155d69814","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.d1379acf.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetZnUCRA9TVsSAnZWagAAh5IP/Ar60tX5QM4K79EDlzdJ\n5lK11+Gxhhs47po2N4hfk8tNYr9ye4KA+ySadB5N8q2/aHwOFeNOnhOKAKol\n3GK6SQCl63xX/+TEGoiD8crruCL8E2XmSCezVpYaBoyN9b0XyLsx6S5ypjlz\nRbpndx1suy74sV7ulcUnUC3173jnyj9mWsOmy9vEIGa7J7AxAG5z491lgT95\nAh0fh+syNcmjKie9EWS0nr3K+5qTukoVEBlN/99cte2pfQrCKQRP39M6EcMk\n1lLxG+IyiOJExlBaoN3H8jaB5r4hJC/AggSuANa6qUB0iI+L4pKYAq0PXIUV\nt6QC2Suj10wJAnLkh6UeW9PTGF+18tguUpQ2NsiaGTHQWzr4VZZDtczs2hBg\nlNlb2LTUW4IRF8njyRdOq9SJv9JLY9kf/xzDgd8nWF29iqxTSJGaJ+PvdrSc\nvNyFrhOJyKGfCVy3O+7t6+z+HP8ZMcgSsDh3LfX606/RwIEW0apY/YEyx2Ah\nBXjOwSLSb9/CZQyu7UG/BFEEfdvDbB2U2CevVvOwsl0z4kS62bRR8mcIjFcs\nWporzFbWJT6fhuH12swykm9t/krgR6NiKQzaQmPjBLYLj0DEytkbVx0d0f6H\nw9Cg2nKb7YfMFAEiKX8uwM6syNoxf+yPeUq0891ytXUFRd9EKQ5x3nJy225F\nRzty\r\n=lhJH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDn8Dq4SclnTqNHSB0HYbtAC5geSLp4xOH6UqOgd3hLIQIgZz3hRiy0nAfP00AbGJp3Hc0qPWmbzqrM7Bu6n56bh3Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.d1379acf.0_1588959699140_0.02671913681607463"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58d51fc0.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.58d51fc0.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58d51fc0.0","@material/mwc-tab":"0.16.0-canary.58d51fc0.0","@material/mwc-tab-scroller":"0.16.0-canary.58d51fc0.0","@material/tab-bar":"=7.0.0-canary.047e6b337.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"095d9f72ab7ca9994ffd376ac6b1b0daa4c99011","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/095d9f72ab7ca9994ffd376ac6b1b0daa4c99011/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.58d51fc0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-hUPfmaQ2+32I1fFBGOIwMr7UxQCIfY0PSfBEMQa+W1St0Pds0k6diD6bLnBruk48KCNyLaJZ7oE8cnzNJ51Fdg==","shasum":"bd8d08b019dd2a63d33d314dc8efbdc226cc8de4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.58d51fc0.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetbBjCRA9TVsSAnZWagAAx6UP+gNcuYyxhcKGDZtYpfTC\njoI14kL18RE5tPygY8AFvumAuVPEFVrCXM+vCAIVD5cL6qXbQ39yuze3LO18\nVAXw8DrAjEuUSjWv6BVdUJtJnUUxyj+gX3Nx4gRZyaHeSK9po20evts0YSz6\nlqnUMh1JU8IpHz2/ZA+5RGNDLzjFte+zE3gfCAc0fTurrB3rFZ6npcCieTAv\n5C/NF13b6r1PniZovyF/+nBxRoOUkV9J8Hg9a5sC0bCEKNgYyYDDwzRRAIw4\nNkLu1can5bRR59J+RJ9JSRyXKVvbh+0ufPzUfvYoXmE1Yvsmqil+PrmxJzin\n/a0Rm0p/aMvATst9kLxUeA1OkmQDBRlkb+gncSrpWMMk45CZq1gkbbXCv5JF\ncg/vKVN7nPTUdxM/Sv00KuSxXajKHm/edx1lHl7YXhy95O7+VE3VOowLRsXj\n2P9BAy5zjsz5OQm42fZYMIMOh+CET0Ejmj+vQqHcTjgFmysjgArPkID0bezj\nts0rlaQj0xw65z2KSHIPSlNLBcxhu5aXEq+z0fR3rfI+gKxKinOZDYkeZANS\n8DAXZsw7Y/CwSr9jz4GfxDbMUSA1cx6ZsNfq1a3vDgoTUi1tl2ZwVm7nzxeW\n2WQjM1Xrz+tq6u4PeNLGWY6yitm7CnOK7fds+gc06f3bFZ2iIKnwDQO9hqd6\n/44L\r\n=tync\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID6r5mmaE98i08n3nA8wu6y/h5ue8g7dKK3ilTpUvm0XAiEAmLoF4hOOWkID0luO4J+0/fsAoVATca0+wsEI8YH4luQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.58d51fc0.0_1588965474949_0.07031899377050665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.588062d7.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.588062d7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.588062d7.0","@material/mwc-tab":"0.16.0-canary.588062d7.0","@material/mwc-tab-scroller":"0.16.0-canary.588062d7.0","@material/tab-bar":"=7.0.0-canary.119e21426.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1b66fe2af3ce7c18a07562e7ad2469074135eec3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1b66fe2af3ce7c18a07562e7ad2469074135eec3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.588062d7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GmcGGwO6RXYw0sVk9u6zpnIsXokUcXZE7GT9vhP30buVDSFxV4copdcO5jjXInn5v+BUjCJAsM6Ea72mFKXSaQ==","shasum":"39edc551b788a3752b6be5c8020f2d883bd7557a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.588062d7.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc3/CRA9TVsSAnZWagAAwS4QAJ8C6u848VXIzjP/6gKN\ntzmDgBrR53wiC6d0W08MBaSx3dDE5sEMQRWZpG1bNnUNcQuWbOKeL4d3wBQ/\nTEyF/abcPkt6CfDKH1ZqyjIsh/dN4+j1LbGihKmiWmvLv2QS0sf0hBWOioAg\nnOguw3XxA5tU/gdxU1yUXmSgSVlJ6/1TugO+fkp3nVAobXqY32RF+W0fOj3z\nhoZH39bhX1dycyn+1jCyXakxP/n+TV9XelJcz5l3MG0JH3tZTWbFm8DvsWm0\n+d6isFifAg1wbz4q0hf8csvgHNRfYIbkHc7kHzg7Re3zv528JMI3PmpjmrVR\n55majpuxEBOp1sfnC3vh3oS2xrBk3ss8GaFUTEtkxuSGbmD+ZxifNuPkvY5s\nB5vz7l9KKAb0zsJIgVzPP7jZg5IA3kkD8UYaX7MIZwU/mVFaMTj9R9hnw33W\noz85ma+x2pGFBhjEnVVBQgNGbl8BQPkbO4Uj6S9sNKulq/668IqLI3An0B7u\nqyiDF0WNMVKRftHRdUmq/tCxVOa2U9/kd7FmV3Fm2pYurCygthtJ77MaFgwY\nL3t/53JwNDHWs2sshRzVri5n3btuQfkAoHRItAll/l4RwTdOSJVlGs4fL2FW\n7oTA+JhxHY6ZEWguu6q+BfPpSvSeLQkKGWGkR60Ge0Hm0POKKJkQwrqur/aB\nMZ6t\r\n=Ywvs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDuAsNf+ZFvG9RmNe2pgNJrCbNQ4VlEa4mQrEUZctj1SAiEAp8sH4GpZEZ0+lV8QXpc7LufUthp6UpjWU983CyGibjg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.588062d7.0_1588973054903_0.1686109881519926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fa21f639.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.fa21f639.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fa21f639.0","@material/mwc-tab":"0.16.0-canary.fa21f639.0","@material/mwc-tab-scroller":"0.16.0-canary.fa21f639.0","@material/tab-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e20cc975825eb5a02be956c28db1cebc2f8908c0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e20cc975825eb5a02be956c28db1cebc2f8908c0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.fa21f639.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-d/NYr3ABS15XOshuGkwGiHeibV23hoyCV+/IrOiUW0vJlneyrl4Y+uOWfyvZpRbmGM+qVRftiHdFQJdzPYAAdg==","shasum":"8915be9cf013a55e58dd38aa1e47a903046dcc9a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.fa21f639.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuYu1CRA9TVsSAnZWagAA4uAP/R7kliw3xtJt8B5ZDISu\n96f5Ytv8+Msx1XiYkyYfnDZ8k94W5ewQ5nTsBCRP2B4LRORj30XZNkQPTSRm\n+A4KiUoTfLBNYgK+Ppfju059qx3Zmc69u5zu/RPBBAo7iJP4mUDtb4jlKKEQ\noR1oQUw3I95zt61HKJWQmCOcu6RxnMD7ijIDDS9ZHInDxFmkGSBe/a2vWaw3\nd7e3rfuOYNdJrPQomCLNrqUmAveMfJ2oPtkzMpgDFWmXreEPcobOaBkKJgSH\nH4snSWId5tChwKcMAnPmxvYibYtoZlIcdwz+vSILQ3ofSaBrBoVoW0kCBScS\n0yA1PZTs2z0Y22e73grFmjz1g8bl9MWxXA3r8fZRk2bPPkWFGNS+XxDYX7eZ\nojO6IvSaVupp4hkD6gkJx4HUUxIOD7hso225MwaJ/IVaWw1dRKZO4l5wIbi4\nkQqoi9FXXo6Ziu0rlkG1Rf+9/SGUFRuMifN7n3cYOVl7DHixiO9w6SoaSp55\nDi7T5E3gnUVu7+A8Jv+17vwXR+/4Ru1QYszKu1q7wrkun1DumfHeUtq8sZpE\nZiOoMeUyqWduKWPjiBQIXCtOvCQV/FsxILVV6rm+eax6cxpkFh8gkwWjHqK1\nRd39Oc0AkY9jN9Y1ROh/kOpNheamrYZxSoV7lfwoikuAxxygAZ97gnQHXpBn\n53RL\r\n=246G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3IJWQrzbCfp/lPcTsda56Ie109ptFKhwNK2+Gvt90KwIhAJ0efXutiQmx3N2af2X0irglx+QphWunhI0IHRjVxvit"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.fa21f639.0_1589218229109_0.17985578394702206"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2772c509.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.2772c509.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2772c509.0","@material/mwc-tab":"0.16.0-canary.2772c509.0","@material/mwc-tab-scroller":"0.16.0-canary.2772c509.0","@material/tab-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/757bcaf3dfdfbcc62a5b2990c87cd91f80fbdd1b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.2772c509.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vagdgcXDwiae9k+8Ucs9FXmR6SYbmzn6F8I8wz5lYn0y/r+I2BJKZdNepBeBi0OW9QygekbOaqxVScp6rxyf/w==","shasum":"91339025016a3296d011a8e14d7ce6e34807dff6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.2772c509.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuZtSCRA9TVsSAnZWagAA8yUQAI1Phm1zac3zP5TuRUx7\nGw3x884VphzZmn4Sh7naFK4gpokFxoGftK6JQkkmcVlwtXuYtfeEScvCD99b\n+DXeVhDLbTmejMCWkbdRY6tVj7wgGtlZ9QErzxs2GO8Yc1sI3xqpeuiuHYnE\n2xo1+2yK8wsUEvmCd2FQUFBkbrl08KXo4TlYVZsvv9rkd/jDy1+c/uO9lokj\nguMUFR+Jjz0QUo/1cjoP57v9ZpVlzaBf1QGRWUYPT10SjyToMcOL5bwRZUt8\nHg+MqIVAH+7qh2FLp9Kj9+B/EWeFJa5CofzvWI03WiXVPNCCVIoJJ6hEK1Yf\ngwEt0iiB9xMfh8jiSE8BaA/bU6okAjOwRFUp5HJc0+J076GkZ0bOPwvdi/yo\nZhoU7NgKd8wkwbg8OIjsXjmyrxFGBsVrBLwMutr5cVqnQoKi4XKh+juFxJH/\neVQ1/ml6SgJhRJ0oRpr2jOapkp94nP8Y7/ozicFLqTzLPeysmVEkTLXwba1T\nbuLmHPKdMeo16wF8tlWLxvMrxZQlMX7wPQZEuBh0l08OdJKgB1v7ndrJAKbX\ntwjEy5WuSVqa+gK3lzSvwLyfVvhWoJTCB9tP4ctRWc76LGFibD31m0fGsipJ\nI60Naal73eYOdVXWnpsZIodQ7mbdnKWO/D2zjAjjn+lM7JHb624ruwHFvSXh\nRGNo\r\n=o3mj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGYwXSipdc3geum6iCt2QOPWxRKEqFcucSlltCerGH8qAiB+8tozT0VMIv1UCdqwVymDEzHArGdG9TxDYMfxUMHGPQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.2772c509.0_1589222226354_0.785903751569174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.fc4796d5.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.fc4796d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.fc4796d5.0","@material/mwc-tab":"0.16.0-canary.fc4796d5.0","@material/mwc-tab-scroller":"0.16.0-canary.fc4796d5.0","@material/tab-bar":"=7.0.0-canary.a5aeb3001.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ddd82bfd80666625c1dcd7c92fe79f5de6f84657","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ddd82bfd80666625c1dcd7c92fe79f5de6f84657/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.fc4796d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-z2nKLfAQuhTfW7SVPvRM/4MAtTHb7Dd/euCFGDWIZuWd9hEGXMZPYYAnY/9nzXOAw8BzS4rG/nF8ZONaAFLvcA==","shasum":"2f2bb4eb3f3fb93c03cd9a2d9d89713d9ca337f5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.fc4796d5.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubAfCRA9TVsSAnZWagAAL6cQAIwBEacm6IqSdaaOdcM3\nHZHT4oo9rUMvrZ763igDG1wdmT50JK/TpKrKpvz2FOBKprOPuDYdQvQr2FXF\nA+NuqiKEULhtwH3I4M/zV3C57uO8mbfsfD2jdQsuXnWFKWfhHnXhG5sbt84S\ncbjgvb7KVjk2vGrSor9h8IZAv6zp8NkJGLEDcCKCrT8S17+TCn5iIOo4lXms\nL0S7ZGY5fpzMKXAMRBH185mFacRJx5qal/52uCqdEpre6mBYu0y90jQ9uoMo\nx5/Nn3GPTyTP51iIM3X0htwVQX2tPtJng8z2SPEgI1ExESD5mT+u5FBNfdD6\nn77umV/gAJRmVLjG1ktG9MGZhf6YvTVmMTz+EdN9uB5i0Xd33yXcNHAKkjVt\nrdENblInecz4Eego1+Qaz4IS3Vrc5f/4rHBz56fDRboDU7v1ConFSL5RLfYw\nLVS/QCxs3r7RTA7Tah1fNK7fLU6+wKEDn1flo9fZ3J4+36kDI04pFdfpxFHv\n+HdBcoI+PJsbU0AVFm8f/yOEOzOLfzRtXSe03TccrpGwoySs92+iSWrhrAwk\njzIoVlynw4xbP4vNv/ZuLOumONRVxfnpojvPRpQPD9MsaTAMTLTTUuvbyNub\neZgK3g5JyRoDK44CyOhdJUMA9G5fGiZdvJ8BHd7o0rHH5+OFL8oB/FQOObYV\naJkE\r\n=sNpz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCjHW5o4FcaWS153ufjEi5/YBPJmg/fI8zSFfh5qwG1VQIhAL56nVOmyrKKRsDekliss1Vilrpl8WzPYzcw+uL/M45D"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.fc4796d5.0_1589227551055_0.028595609506356867"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0d1c5f2c.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.0d1c5f2c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0d1c5f2c.0","@material/mwc-tab":"0.16.0-canary.0d1c5f2c.0","@material/mwc-tab-scroller":"0.16.0-canary.0d1c5f2c.0","@material/tab-bar":"=7.0.0-canary.ed52af767.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"56733523245d57fa1e6ebe3caa22ef89bc95e8d2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56733523245d57fa1e6ebe3caa22ef89bc95e8d2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.0d1c5f2c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-A5L3ri8Et6PcQtOS5LPuGoUMfy5Bh3Sl4psq/hTMoirnPn8okYqsXUS3RrVm8Hbp8LL2qwG869ZX0vvWt82pIg==","shasum":"59f2ee876c34246f411912e3a4868ad0eff59552","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.0d1c5f2c.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucGMCRA9TVsSAnZWagAAs74P/39s1bbPYySdq+X/siE+\nlv/LbDwky6F0pU5O+8WvlhjYM1anDoNGLE6HUFdh2q7rYl6wa93dGDD4KWpT\n45jIQ/JewzoeedwNCDmVvh9gY3AZQoA50UdIXYNM6qijXhPNAkbb+NGE983a\nbSU5bfbKzot1xud5ZbNSk0+aDqimp3yFEa2ckgfUs+b3+emGBMRp0bP+0MEb\nty/d6RoYG90xddLKBDiYo6NkK1j0pXnTAcZq1byojZe2IDicqeVdfPTab821\nKAqF+CK2kMuArn6SwDvt18BAzVVA1nd8oTNQV34W1DA6ir3jBUK6l5T/x+SI\nW2vntnS+BDZj3O+wl/5LyVMBUg800RnnDnwFOjCn4dd5vXNoGQ/id8MaDWnf\noB38MPVa//PJhEp7gTyRHdfFJN0Fh6wMhFAb7qMQmlvbU3P/X8bSDUKNxcYw\nixW1IC3g64aeWnoG2J8VvZbAxM3Cvd6vCVy95rCWm4bhpy94ZWu0hr8hNP5o\nLpWW9yZtRVJbyIkfM/1WT01OLVt/KNQlKqqcvGv4+hH9ut9P1b4cHcB/JXs0\nZsgbsJOAnHiPGznACcIb2UJSrzcXhWcocFuFFS8zfwTPwuIQegqD1dkqXAGD\nob5vH6Z9Gl+nQ1jC7GFc1uOlDSyYISzqy4xgBgzOqMtCJpHKafED0OU8Y4qN\nACOJ\r\n=77z1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcuURzJ7Ncco7acRbGhOdmNZQiFKpGXP5y9WkMwjPCJwIhAMvNNX6o7iUqyhGIuANLwR4U1lUop9eNcJs0/ye7WLAe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.0d1c5f2c.0_1589232011887_0.6061573014504718"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d083d93a.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.d083d93a.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d083d93a.0","@material/mwc-tab":"0.16.0-canary.d083d93a.0","@material/mwc-tab-scroller":"0.16.0-canary.d083d93a.0","@material/tab-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"740c7f6a0f292b586689cce49e46a93876251b93","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/740c7f6a0f292b586689cce49e46a93876251b93/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.d083d93a.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Ur1RwywyAf7XdiUwk0LrfGbPkD+SmdZykymfIn/sk8E+GkD9wI5rezXguN3QlRols7XXoH//QPYznLz63O88Gg==","shasum":"de8bf8f5c0aa0bdf78076d1a5cd8ccfc625a4383","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.d083d93a.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeueteCRA9TVsSAnZWagAA2j8P/j17pyTwjVS2TWxUffn5\nNcNccoJ0Uq5aUxUe6M1/zsnEGaxHEltgwYJstYO2yiYUvSN2D7BY7YD5oDvb\nsOh76zBdpmxAnFR7rwMqjCpF1/cBwB/VBlj40JVU6fL1Xu3zIxUfL6G/p7Fv\nszsQBly2pgd0MxAR7vgoNn2fQWTC45CCrDNCSWcDQ6Qp5AjGHYsGXUo88I7c\n5SuX7ot3OUk9ewAEmUnS/MuNOMlrfYN7SuCBw778h9YV9xiA7UjW5lrI6L7B\n4rTJ66+ZGz3Ljf3cUNyQIOyUAP74tUU0e7/U5qZxWZUj8UgvlHY9gjRz4WwA\nAHIUXHSqvoRTsoIY5EemHqZI/cSCAlBpqo5K1u2HF+VVl5pukfoaf8lR3mN9\nFaOX6f0opL/Rl+bI7ENN8miuAXaBOoSHXb4l1wbs1AuKA9ImeqJ25JNHtnC9\nIYnReP8tyDhItdeH/9hsjVN/Ua1BjljWfhTieLoz1xoP9lO5gm4bfuZoB2cr\nxRKl2MKm+Rowl0tm/Ms0MWHTpPakxKNS/8cxOg7WODkUqIJFch4Uu54qTrcG\nrICpnDIIezcbxpLodWOKl1Cj3knNEskcw7kdI1Tto7JS5jIcL0biC3fjN+WV\njzlgLntSrPfufFxsgrK9pJHOOq7HdX0Mktmt6uquHV6ZzikoCK0TxmCX167/\nG4Zq\r\n=GR8Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZF+KfRxqLMr0kVUq9Rs+1ozOCP7reDppdkF3p761tNAiAbLR+ug8Zd0QvpRTJuvQ+93+dwNqLJRyVfExcWjhCibg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.d083d93a.0_1589242718150_0.22638015018737123"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c95d429c.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.c95d429c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c95d429c.0","@material/mwc-tab":"0.16.0-canary.c95d429c.0","@material/mwc-tab-scroller":"0.16.0-canary.c95d429c.0","@material/tab-bar":"=7.0.0-canary.058cfd23c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb13fcbdf906f1aa91a8a2ab889def17ec03e1ac/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.c95d429c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-syRKmkUt2m/wDVNJNekj6PA1EeesCK5fHJRuxZZpi2NiMnqN9YyAPDvBsXE7Q7o4AEEm3ZIRvcOYmcBehYbsNw==","shasum":"90d1e3745d955b36b27dcdf9b6ebf807182a871c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.c95d429c.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuxcTCRA9TVsSAnZWagAAYCYP/jmrkXe3yj0E6PJvNZun\nJsLNGLIDJRj0KiyWPXbPtd4YmRMPWP72al9NOZgu/UR4fl0nx5nEWB0+felt\nOMm6T1WMwUrTT/GmyAQlKDUmSZ/dD+QWRaXQcHIrWLIJmTGdk7o6bTMcXKvp\nAEu4k+d58G7wH5NnFLpkNVGBbjazxy6vZMrcjBkX10RaP0H/xwQJ1ZYi2eB4\nJk4vhaaDOk+uwoTE+J6/XyPTtJ4hyXnwoyZMiIqf+77A02s1toxECCVYO1DJ\nNk59p83Mz498m+w83FY67HajKADmKS4i+gk94bOiQKnl5yod6mdPivwgR6tO\nskn3Kz41h473WrGeu0YRps8LHSOcG7I5RuEF/zVpYVqOyvV70Fr87eoyDybr\n4IpG2X6GYe017ewMWdqVNSDciDEX+GvecCsXxEX5nlhW8viwqQrJlUEzy2f5\nDn1UJEm+h6YCIJUqPmzg52oAj4Jhp0Gf5/Po3U3svzYxY9wbA/PzKp8EiSxA\nIjYnn9ZS/BLUhBJcMRUAGHLCB3uki1tJHQOG5JB3oXtU+viMXb1AnTxG2har\nWWtBlcMy2dGl+PIH+OdLQF8pSBOa9/NBoJSjngQiso0eZujYEVCD2iLU+M+P\nAA7NJcTpF3gx6lYY4viOS6wDJzcUxhPeZHalC/Qo+g9LbuxoQyfPgTEamp6E\nL0v8\r\n=Cne6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCCq5dm/NF1fy3Fqe8D43uDda+rH4uVz3qXK9GkNHGKHQIhAKXgxaepmDYHfngmG6MTz8WHi+YyBYS/oh8u5ErQr2gZ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.c95d429c.0_1589319443461_0.1053660262845455"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0c1ad726.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.0c1ad726.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0c1ad726.0","@material/mwc-tab":"0.16.0-canary.0c1ad726.0","@material/mwc-tab-scroller":"0.16.0-canary.0c1ad726.0","@material/tab-bar":"=7.0.0-canary.0a371b4fe.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9c86cc2738d0075eee9b892c5c2fec842ae62e41","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c86cc2738d0075eee9b892c5c2fec842ae62e41/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.0c1ad726.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-0SBHOfhHW9DzbELeyMBGXPEdwdCDMFOThHx4o361rGh35pNVFTA5PVXsQHFicDPlFYOP6nKwfqwSVsu15USAzQ==","shasum":"2472ae42f5ee0c7b14547c9822e6d4c8717e3795","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.0c1ad726.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu0CeCRA9TVsSAnZWagAA97wP/0qkyEAvYoxS8ymHa8Yy\nfzFjYzTLWJD0PIqgjXM2b1yWp5JBK0zqzKvHOZe55D9aEYUzbdHzsGcmV99Z\nIIlrjEcyXWjlEhZfOBCIWMXztA2PdqeacuRZzU7Np/3mYyDZiWuEz82M8uWI\njH/uM9mOq9seCluEU6LWIj4hSFtAjl0Z3UlkrZIWlw1xwtDjQ4DpDPOQwcuZ\nv8DRZUveyrVhvNpLgSKJoZAkEIMx6GvtD2WcqAMz09yL8Gfeb/gTVeWeMQ9E\ndF0Vh64Z5mjVe4OSStlaXS/ItUE4KXeQw7Jq+1GmBAmKw31JrBY+6yXC9nHt\n2HHt6n+vapTiUXDn1EA8ZsQ9dRJnHPt2USVu6QgiCfzaUb9cfFzOc64ly263\n3vmqEOAeFfgCQxawBqDqj3vlDDmBUdTMJ9SPKjSW4PGhIPykxQftMI5VBQxC\nVI3vchbASEWRWAwGE8KbY6dgsC2WYkTCQFCG8piJptu+sryytILobdifEwvt\nr/S2r1PLeVOqY5MZEBBCuE8uN0DQy/4iXth8lalia+PCgnqhcekll/eF7/Mg\n4OQsuQWEFLDQ549bj6s9vWNjTOmna6ARdo+b96JU5b3qdbgzFbEcX+N24fXz\nnSH+lsurUZcZiYS5p8ml1trydaJeQacnffhyyyGGjq35ZHodDLqjmbsXy2/y\n8uZR\r\n=SbDQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG3qyM8MyysZW94amxYYpVgbhW8DstKOMxXpfA0HmY5kAiAKpW8TlZ4EmmnBpwl7Nvnf9Yln7QI6h7MITo7IroLcOQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.0c1ad726.0_1589330078478_0.389699443063096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8b6a4700.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.8b6a4700.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8b6a4700.0","@material/mwc-tab":"0.16.0-canary.8b6a4700.0","@material/mwc-tab-scroller":"0.16.0-canary.8b6a4700.0","@material/tab-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"268d44b68432688e310671d956cf5005633aef47","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/268d44b68432688e310671d956cf5005633aef47/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.8b6a4700.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-khObpFiUaFQbq7qHwBC4lFVkrcQECAuP/QI+i1wU2PcGfg9P1E1iA9P15Wespm0qReYObChC5nhBzjY/VxqfKQ==","shasum":"96a3d7e174d5c62eefcb46653fa9b20463dbf96b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.8b6a4700.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevCw4CRA9TVsSAnZWagAAGF0P/AxFgrv6nzZv0n1vLRN4\nFh3NsPw/ojwPZkWXT8pnHF/aW2MyofmjWyk+i5xCzPyyxhrNe0Hhc+btH6hh\nBvId0v0mzFR6AROqsly68G/OoQetMF8hPFGgfqRP0iIrPPEDB5jIV1X5ePn5\n6/5YOF4eBmAofjPo6pKq8OH/RqP+mFFMYI4VDeHOaBosVZaPo0zpfx7MIT7v\nu7EH3lLgkPLhrmpa3ccjxbVbkltSdX/71tDrSqBJ6ag/suOpj0ajZhO1m1p7\npittw9VdYumpbWLJxDBIhSNnl//FdXKQeXLwjiISYoCJYodybka+si/PUUhU\nCKLBHPO/FWsjdQdk1FuEZ9mLUpjiNq76T3nueUkhmMZz5NAmTr8qo8e0GSux\nm/EUhiIqK0jzIHESDx7zFUS5b14rAR1TWUSIcUIksWaHcrdIUo8lLs7VwLcP\ngsvghxbHXjXnEGIG7zD5rwsyZ/XNl9CO2keRB2Wwsk/8QIVKMai7OaeRYHmB\npE4piKoZpWRAiRJxcdRZLaBy9j3RBEBqLFN681ltqFL+AoIhAnIYgil7esXk\ntvdX44G/HZxV2HI+pfNvWCYyuaSNuYPgOsMjiW4793h57OtCUJ0B8JiHp5RK\nfFrWpAE7EVklRRgVRbEv3NIZ9tBcBwpxqtlhvKyi3kurAZL0HqqDMMe+HhBs\nOIOi\r\n=HFK0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4dcKizJejeleHf71tql+ThLZ+h044V/gWXaXo1OA1BAIhAJohw2CVPyxGeCTHO2nOgZvznUHZzj+YwPSXnWYzMB08"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.8b6a4700.0_1589390392193_0.734603754400122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3270effb.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.3270effb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3270effb.0","@material/mwc-tab":"0.16.0-canary.3270effb.0","@material/mwc-tab-scroller":"0.16.0-canary.3270effb.0","@material/tab-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5c72bc76b8ddfb71726f9139d6105a4b108b7174","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c72bc76b8ddfb71726f9139d6105a4b108b7174/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.3270effb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Vp/zFc3Mq2hB8ULInmjlJN1I3jLYBuCYEce3tNHiXXn216dfAJKkO0cbaQoL6F2GRk/OKxSdsdfkMZnEVwqGzA==","shasum":"9c13848635584ea0986e30788fe5cead47d342bf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.3270effb.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevGWtCRA9TVsSAnZWagAAOmQP/3hgj1lgsrthQUnjanPO\nFgO23eF68ZKZh017NvmVbDMdFGDWF8QU89MQCEv+ThYBVX+t2bHyYv6f7vyB\n+TPIfcwq1XJ2FpARZx3fkjjRhW+cI9jXM84Zx0hOI64xlzLr7Hen+cGq0rpI\n73x/P59JzUtcsSFF3SHDMnIkTTMPU9VcsJDkIDB+XdnEA8BpVudeSD7seVRa\n688KtqZ5zICgDJj4LgxtJFLYHzb63k9rCtr6/6QRIvvfY+uI7ud+PDZUokE8\nOQtN+mRB45HI0eV0q05Ia8iSfkN0cQx5ESYpHrRAuesHbcgvjfH15PsJyJR+\n0xcnPe204d/XCqWskVHVJ3144xGSK/HC7aP+TcchrZrgWgJX9r7tP7/Lj/oH\ntvVlOQ8yLCaSTdUy2rYN9rn9wzphjw7aosf3dqVe0+kaFFOBayqr0J2p7v0Y\nCikErUdscZVGEsIhkFWESggGahrnr+SA6jq1YgFYRiOmmqGhUNCbNouUmJVD\nLPzfGjh93ZqrG+fd0ATPMGAf5QcV/vKxnLiFNF9UJOm/fjhumb8zOkvHHsCB\nl9bVqLBc1l3r4vT80IOpkdIvmarWyklrhk5qnJbSZfEc1YwglgD01zMFheH5\nEYd8jVSv+dw8cEbSTlyCxYPhY0RmXT47rqZi65T/kYtUNsW8dkp7uQKOjzIy\n9T/1\r\n=MGp5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoSyRTaxDfw71gahz3+MBbRQTAnNmpA0C4OfZuRNn5yQIhAOCzpoV1DO7LRpKSrG3q0450ff13vMD/VCi9a1FpEHbz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.3270effb.0_1589405101300_0.38208187062040766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.832e64f7.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.832e64f7.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.832e64f7.0","@material/mwc-tab":"0.16.0-canary.832e64f7.0","@material/mwc-tab-scroller":"0.16.0-canary.832e64f7.0","@material/tab-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27f7d1ac979b6af26982de92c2f2bb7fad00ccd1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27f7d1ac979b6af26982de92c2f2bb7fad00ccd1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.832e64f7.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-MoER1PMbnSomyVwGrljxLx8dsWGJoq0QcVm9Tn/zG4QGBvG2RNA9WuIsQfAnUgRvFlg7sc4+Z5g5NL3gPQ7crw==","shasum":"32816749ddbb845c9f093377b1e70b38ec1dcb3f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.832e64f7.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevJZRCRA9TVsSAnZWagAAfBgQAKSejn3GCSednlagarB4\n3J82HafVvSJD/k/FhWImK/hNFisD/nZ2HdTkrfbLDuWMaqg1pdFfrvPJKIKT\n7h3WzsNKa7twz/VBr2l/q0o1L4aMJtGXNoZYYczySD0MO3EVyRZjkKJTKBuC\nEz57bqmR96hjs+zjQYt4BzIGFSy6Vmq3X6d+Wa0UDsUNrZyANbtF+EQlVUDz\nJozz2TJ99khBg19nQdDGM6L0InSgn4IDBUb4usk7Nh4v/Y7XID2Eur+94pjj\nXZ8JTGwc54tIUy0qqtxP1E3P/dfrEdhyVm4uKeiSQIPfSSPEKtXtMSVSiIem\nY5KfkcqpJgL4Q72QJfSpSW4lxlU82qXl09fmNCyEEtiYETgTFD4FpE+j/GEC\nHHuV1aIfXDKCJo/t/9aoGHuV/Fj+qMrY2njTuEAbtEOIJO4b71dtkO6hVk5H\niXGIqWO5UUBMisiVyPUMpQ4AHrQdXkLGuOETO8Q+tMmSU3SplD+RFozk0voO\nXBXnSYRixSjK5RT3ZMh9T4egcl+JhfZZoqPr6J8CQmMphUKIH1OvyxkKpQaG\nQ6HIGwx86J7rGL5+u6A8VPhYsZ4fSrhkArj/UCI7jcXUIDhyJ/ilbhmY9kRf\nKBNZ1rDCN6U/vyYAJkMHmVND8ZjzR5d1/4k/uK7PWZT9UEjBkPm6Lgc0eOWy\nvS5s\r\n=8eHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFHxePflDIuRwi8cp26SipY2D0ka96iyEjv4bplPM6uzAiBRqufItChdqykTzVxIIJuV1v7TzDr37gWimrtLV0vjAg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.832e64f7.0_1589417552675_0.14941027210412083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.472fc4fc.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.472fc4fc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.472fc4fc.0","@material/mwc-tab":"0.16.0-canary.472fc4fc.0","@material/mwc-tab-scroller":"0.16.0-canary.472fc4fc.0","@material/tab-bar":"=7.0.0-canary.2139200b3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0eb6479ea05a7af0418b4fb939f915e39af03923","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb6479ea05a7af0418b4fb939f915e39af03923/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.472fc4fc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-kp2DtQw0mo63qjU0ZSjNn9l/YDWmJvweT8ShbFCZb1ZMrVO8Wra6j5H0kM9DzZgEH/WsYtXPRyZKxlGoiM2VNg==","shasum":"7f3cf045d14486923ee05f77ee9f56bb2dc95b48","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.472fc4fc.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevLzJCRA9TVsSAnZWagAAkwQQAIABuT8Lq7tZ0iWUB6qa\nB7zllosufqOaxrIToy3iDazmO1BadVSwv47hEBlJ9aW86oCU7hNjFnejNwfa\nPeg4NSf92273Ism+evgoidFLVur0riBJ07TsUDtnhQ0Wf3MG3nCrAqh00sF8\nLT2QLKRHTRulKZs3tArQ3EbKa0de/a7UGN5CmrFDZREP44mSQA1bWWewIMOx\nB040il7BWqe7aHqX4+xjFTp6JldtOygMYSLGgqTpWcxHduHDQKt/uBQef5FP\nyieFI2KZAVX1Ywff0Y8NwsECYjMTOvlo3XtnJl732Z5ecsMbJLHfvYMI7DzZ\n/7f5/+xT+qjD0xSHfiJFSgnsmcEiHuVBsFkYUVHFFKdo2QWCPI2ABp4qGyic\n3mcGvCciWs47y75IwYCFUc6tX5S33UTrUC5wx1yyKwdeoEg8Z8Lkd7in9rSG\nZ5wZEZD0YIzxnI1kccPWcn2WeJN1k/85xeH0VGwwFs2IHyFk1wenXXfT1j7x\nHQXnX+IIiw21J7+hnGl1ObMM9UPUVNm0hthLSiqXUQ3UpxOm+kmxvPRiW05g\ntVnwah8+dYVNV2xmUiCcECPvKJ3p2D3WbTfRx5CABt8OXPwPXT0brei9ZJxV\nanRKS1vUpvZmEU29oh1Vq5wYtl7UDy6joiILEJsE1n22B1V7AvaRXRv4612R\nCsuG\r\n=lMxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMrh8m2f+ietBsSSM9/q1wSdaaOqZpfZldvrhBmZW0MwIgC1XhdWLS1la8eJsbbBzNEnD+uZRB/hshSCwYZKz/mPc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.472fc4fc.0_1589427401443_0.9056449775320197"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.4dcd7dd5.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.4dcd7dd5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.4dcd7dd5.0","@material/mwc-tab":"0.16.0-canary.4dcd7dd5.0","@material/mwc-tab-scroller":"0.16.0-canary.4dcd7dd5.0","@material/tab-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a2b512eab44e739c09fa66cee4f0a65698e697f2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2b512eab44e739c09fa66cee4f0a65698e697f2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.4dcd7dd5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-3rxfOOFTu+8jPAQ8H0JU69F3FfRLaeu0cnDjjUehKiIVfzuxRYd0qGALiQf1Nhxx+qDTQMEHfxiLDrF6WH681w==","shasum":"0077e12ec03406f5b7a085ad19e0a7c2fda85712","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.4dcd7dd5.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevXD9CRA9TVsSAnZWagAAz4YP/2UgqzxsjkqyuvGF3JwB\n3Us7bdEoS6OHkMrT56M4C7IuvRxioNkpozrSV2ONm6dwkpIbAvst8BSw0/lS\n/XAkcrUDfXcucsisDZRuQfysfqdx3kqhkgUbXRZyUyAbaONQcPFQViKr1HRU\ngX2wk/sQg4imLwmBytUtJQNoUMp4p9jWBChkp7ZZp/IW87OGDaAM/4H75DdV\n28uI4A930C9p1I0DmsRcls0zXPZvC5lefrJ/gzKlPsCs/NpIR7yRPf2c/lb9\njp6dsIhNKBF8l/neIvde2zGdw1mp2GVQ7HGUuZfpsaLDXuD+AvFAO4JMrDyh\n9nDn93R0KrSxIhTKvTQAvha0uavgVDrH77aPUuis2mszUfj514DFbj08v/hf\nf+6aVl0HwIDY43N2wDiYKIPRAnoa5rRMTTI+AoeMKuJH3gXzkVOPBGVFeLiI\nuTvx/svzDY0QI7qkfF+iJe29H2lEfHOjXHaYZtNzM++AD3eumo79tsRnbvQl\n5TT6gUnMBFHFJRYx4BI++IQzibQe6+yBo+ejAJvzBffqIAsvIJI3rhjfzH0D\nf/x6DWYBsy/W1xrWvKzk+umvl65Kp0+ZzO01wV1FXrngHrMwW9Y8L5V5ywKL\nmb7AFlZZC7S1MRliJojAnbs0h+pdPYgB5wuXkJK2xT1ZdhT1cUDj7iImsKiK\nGHAQ\r\n=v+Af\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIChHWOsdd2JFbNViNdAz+LYG+IXA3hweUhyA3B6lb7ylAiA5iaDSBqgdqgUtmQwTpfIC1rTBbx7OvZTiBli1RfWkPA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.4dcd7dd5.0_1589473533198_0.8603443970449389"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.bcd3400d.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.bcd3400d.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.bcd3400d.0","@material/mwc-tab":"0.16.0-canary.bcd3400d.0","@material/mwc-tab-scroller":"0.16.0-canary.bcd3400d.0","@material/tab-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dad5f0740d5be7e0efe9c5037afabbec57771668","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dad5f0740d5be7e0efe9c5037afabbec57771668/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.bcd3400d.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-tGdH1uDgU2WWjaO9T5b3j6C6VL1s3ci/V4+cKCDq7nwZf3GDYK7rNRDH/mIWEOvOaibpthUWVAD+pcWujK6/9A==","shasum":"1b0701b0d418f7d298710b53bea0cc1ed8b583c3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.bcd3400d.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevxypCRA9TVsSAnZWagAAU/MP/jIU5SDhldQnzZ4BvlIE\nBpcA1w7+bisQ87WgqJ7AMQjTYVseNaVxP1AN8drKyV1NJBE2SlJB4bKB6TDo\ntaSaHHhfVhk/LMacmJ1l1Es6317BQzm7c+ckIlQRhVlxFu6v8rFoFP4ZCmBx\n4ow21jZN4bngIQDAEtGedJERVFu2wRXOntMEJFnDtpr8XODdNttzfae288Gi\nIPXdmY/5LnbuFK7MyugyGQLCz3+BdsPFjg66vlFPv3DOTIk/io7Zozm2uVsu\n+z8UHnAzaAQdOXhYG/YgDH3H/EbsfHQV2fxjCEqxWjxHNDuxOKt03JoCtQQ8\nHVVQTdF6HB85+y4iUO+/HFAzjoAgJR0mZnRmsYK0TNvKPuyUcYdzlPwxT32v\nE5NvL9nBBHp9EDPoXx5TvKcWw8ODJq35mXd8s0lwDGNMqe8MdTQ0wqZyh0uj\ny+jUP1ctIA0YutxuqiVkS+RICojhpTDAU5yVIzHNIhNGMh1btEqhDx9pxDlo\nBp7203k1Gx/r4m+g2egsYo86VCgughgNnHucdtSXKUJ4ld6CM/2sE/4zOyHL\nFVjDzWltSmFVcUmG/9mAoBln3JP0lKsZOnJw7vbXCkfkOrrmBmQdzR6uEpoH\nQZBlVGpg7WwbxHgqQ8hUwYt7Wt4lXArHUPPSjVbNMQsJAlQcYUt3C8gCYqTK\nBSBZ\r\n=kf+f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHioZIbPWeOovtcMoRSNFZAtD0BilCqNZmdB9Qw0RLIeAiEAttCB8ZKDGW3B2f1LWBtYMJcbp3L/Wq6bJYdBGWppzyA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.bcd3400d.0_1589583016898_0.6939029202139493"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.91f63179.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.91f63179.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.91f63179.0","@material/mwc-tab":"0.16.0-canary.91f63179.0","@material/mwc-tab-scroller":"0.16.0-canary.91f63179.0","@material/tab-bar":"=7.0.0-canary.ad0c0c103.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0e5622d76bebf9f0f121549fb3dfc9bce15378d5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0e5622d76bebf9f0f121549fb3dfc9bce15378d5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.91f63179.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-06voZdcQtQPaxNfYxCtu9gUlXO4VZWn988p8cDeu5BXn5gsQj+C616lTnCMNlmr/PhwlUdRg87Kjpk2a4wRyCw==","shasum":"f683ddf6ec0df5bd8afc49015b8a654b9bef5eb2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.91f63179.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevzUvCRA9TVsSAnZWagAALmIQAJFxV9yVEj8fhSMihCcq\nxzXYQ//l6rm26pPyDBsJFhdLnCNJZ6TgA2S8mY2xogNb9DxADn73xBh9JWHp\nZrLS+ojSoTcfiaNcYOJI/e4Y39o+yHtx9BRESdSOyWsmDqv7Xd2s8p0a4TWy\nkz6ztQ6VXwtXOaZwpKaw/KAbm8dwzjbviSubiyiJiA17IW27Ji/0qnmAkk7v\nJs4mexNCDTgFeEszzeSZ6aJtpBxDmgykFNHPW1BFThgX4+lIe5P5MG8SWW7l\nIeqkYBxrrY2eOkb2u3iI5qBkUaWDgVKTiSrOBxKF9Cb0PFf8csJJCANFvzwT\nY6zsOkA9WQ9sF5nmwxkoyLINZ/YYBUyaupSrtDssrZ11aOCzk5Eysymy4TxW\nJit6bEP9h+MIKKdV75ibTlpJjVb7QxgOTGlUw5KZpPvjcgjjN8zGqoEqbWQ2\nM/0S7TWaixnwNDELZNnU2l9Mwunqspu1t3mRGryhnat3J1V/X7cy5giJ/TnA\neLDexxJAYGoxsom5d9JMQYDYfC24ZGKdvR+aFEXfyk2UmW5Me5JCYLC38sHz\nHLB1R0oKChYc2LTQWhe+3kErHxw9FOTCAoPwrM1JBY03Lo7Q8jF3ewzDVXyn\n8N3plqn2NyAUEPBTrQPkFudoG0/l/fps68lyx90RLbwr4j97nKC14Scn9pJn\nMGn/\r\n=VkS5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAE0ezuQ1/kqAzl1fqIBz7yAQIFJgpn+T/1yVVaMqVuIAiEAlzRtxTG17GnOJqtFLn2MlIVQpEjzXSuYF4DPjPivTvg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.91f63179.0_1589589294903_0.8610363166598736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b8aafb56.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.b8aafb56.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b8aafb56.0","@material/mwc-tab":"0.16.0-canary.b8aafb56.0","@material/mwc-tab-scroller":"0.16.0-canary.b8aafb56.0","@material/tab-bar":"=7.0.0-canary.fd8f8f2b7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cb4a37dbb03476df8ec3422cb9bff794468ad220","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb4a37dbb03476df8ec3422cb9bff794468ad220/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.b8aafb56.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ZFNnjK3TrpXmm7FWBIwy225nKjJAhme8HmtWkLJKudG0/BGYGAU6AUmOapkOo7XUMSW+FtrgfS3wyb1HEHj2EQ==","shasum":"bbf638949a6992f29b098fe078868c413a4aba64","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.b8aafb56.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewtSkCRA9TVsSAnZWagAA4+kP/280lFmdGpXG1CigMgIk\nY8kXRHOuN4cRteQAaers/F5MVWjMSVsrRHH+sscbWy1jsmh/FvQocMk1vEGr\nzk1nEJArQ0PfZjvbcYBS91i9wwUnoX/lPtcbZ4nKrfpHFR9uiuSptohEUVfo\n8MYPoQLPaBCa+6Ubfcdn4TaDSh5kgdvN7iXBkGIKgUiHotyuref+D+pV2i7F\nrGvkfl/O38Pw6OtAQ7TWNa/Jwe+VWfwZ9ke81oZ3uvJj2pCC47DEBlHT7fxh\nNwmWrZuMvN7+eh3GnhQH/Qtqbq2a81p6pDKmkSQYy9l++IsPOIScPWiwp3vj\nryxw92u3mP9YKiy8vp9vYnhhBTXU8RhflwLEb48bATATXvBagq3swHp9bdCG\nqMZJmijKK27Zk9jWnkyQ84z6vnlGL2TbP8kK6nivdiJrpkSqVxAn3G5zlUBr\nMUCuAinqdlp4YU1/Dn7E5MFaQbQmxgUvQhPy0BX4DHaQQPVY1o6URMJKRtSe\n1560LEj1+dRUj1MHGmjGG5PWOPDhV635X4fy7NjySEcFQG0yYl+yLwtIvhBg\ncf0ZZk3S/wh5/baWsBTro4NsaxobnfzNgOEhxjO53i4dsAyNbeYc5cioSwTD\nccrJLRkcgeMC4out35FXg9pOhP0UGz8X0IQwGKoQ21xdA9kc2edzwpeO6JDx\nS9GY\r\n=5SLq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpsJ/d5ghhOA3nae546YQI6hK8zqGu18IzZXYaMyo0FQIgJqtYsIVhtYzPG8dYTxpV2KCR/X4/ay/dpRioWEyoP3Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.b8aafb56.0_1589826724015_0.7049903285456052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a564b194.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.a564b194.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a564b194.0","@material/mwc-tab":"0.16.0-canary.a564b194.0","@material/mwc-tab-scroller":"0.16.0-canary.a564b194.0","@material/tab-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"88e988925ffe167fc3916968d88a99b85d5f0319","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88e988925ffe167fc3916968d88a99b85d5f0319/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.a564b194.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-p5ekNlS6TfeN7Usu+CDUQQNKxutla46HI/Jr9FKJKHLGP6NALGvsRQg1DUt1u41EJSKjrL5Zxoo4pSwE4L5OUg==","shasum":"011ae4e85b7bc1b5beb1c54ee67041299baec16c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.a564b194.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewxRgCRA9TVsSAnZWagAAos4P+wfPWyIz1Gjn/F7/738X\nQoV4Ujztyo+r2B34oVnAwj+9lAoNi1uMbly5+ll11iXevxEg7Kx6Y+HzS2+p\nkd/IZmX8/8D4USQonDWdgX2j1Az714eFfblqmD1XqqM+a2TXJWOkvihOdquB\n+hkVEQORmRcTEhA2V0WceExai5N/hMDY5W7UKREP/nqLWD38+xEs6vfRXvhr\nzI1Tbomn4x2WJy5BI2Rg3hikBLvK/PxG4J+0F60afnXRUj4KVQTiXxr6juNd\nVHyTOhyN740sE8Mehl0HaaXXO83KZYEedDL2rSkPjDhBKtb22pKtUoOk22Uw\nF5+zqkVl0w4yS2aTp5dNqn0UixAO3A1hrTbnA0jLHKQ+CMRWo9zgPl9hFuk5\n3xd/k3Lu5tvFuV+8Zu7GRtB/4k6awpqWr91lx3rFlNJjWFGIh5MouDmeTj4u\nSFT8WyvCFX6wQ9Q3wb7wkZZRKRKdbRcI0WRaCahVGQxMe2ACDDd8lENcPufp\nsq6RUTdLnI31zEc/FbWec8mY2mA3JMlXLT+QejkmGItIy6nu1FDSBWuOz6HS\ndPIGXSfK85LQFJ5z8DpOLBfAJbD5dWrWmMyG6p3Qhsg0F2c/Y5G1VzY2neI6\nd06vi7+FugSysMLQDxx3TBPm/3GLSCARDAQllvdTPG8QDdgXvTCwt83QV1T2\nLnpA\r\n=gHIF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIASenQSYaghxb4ZTmnB7vYX3O3gs8QT/aMdPwB5bDoe8AiEAm47i7scr9G+t8cpfX1oRapa5ckHKwEEc3wofY07PAQI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.a564b194.0_1589843040134_0.987075869016214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ef56465b.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.ef56465b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ef56465b.0","@material/mwc-tab":"0.16.0-canary.ef56465b.0","@material/mwc-tab-scroller":"0.16.0-canary.ef56465b.0","@material/tab-bar":"=7.0.0-canary.730920fbb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebf59585445179b39ed7a77dac598972ce48066b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebf59585445179b39ed7a77dac598972ce48066b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.ef56465b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-TpVxD7njhp3KA7oIU3We9vYHMhx8o17YCSBb05zFN5ULuHoWM1B7Ay0tf8T5ZwAdexda2aQ8d/7sDkhPQ0iC1g==","shasum":"3b33f2cc653e6069acf579c4b8384ca4698d3eca","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.ef56465b.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1cFCRA9TVsSAnZWagAA++EP/1ukzHOQhAIq9Bknxzlv\nNZESNgOJW3ufEKixRsQXr7QLJ8fkyujrDqgbvdp4+oM+XNilS2Rx6xto7IXe\nlnCiF7yn2F9LzNBQBw23aq1cXinZ435WcGuH6GmGp646AaxI0iHSOD1Igm1v\nAdMSihQSwT3c9Q1YhdUkjfd2TTXVWvCibvMYnyyZZgUPsHJ8fc4Y+LWd0/KO\n+qpQCsY6REOZSHKZ13hz4VkkIISE1aRWyHQqcxqegSP9FxFLJRR0s6sjVViY\ngGp9PpmOCd9AZSDHftSodkvkIxGyjky6Ox3Wqe/ymyuRviBcsKVr0TDqbccj\nphaducubrM6/C0d9Owez7vf2sHc4PysRXd9AWASF0OGVpmRVuarl6YA1Hwfb\nvdrXu/gJyECAd8oJlCWcoKTAxOxt4ckWX/RUshnFRo7jxo+P+QkMMKlOLeTG\nlTMdZndkqRE//siQd1IbLeN/IDgULPyZrR5UQ4it/ClKZov/+L0s5arkn80z\nyqCNY+yjTwoeN0AlwM5SxpkALhqq/64XYDCTgTjvOAXiSlA/z6HGYYPa2vT5\nIjGeA5W7vlvSleMZn7+4FPxiPv16VFfxXFUEb0wAuOL3wiK2Uv3yrTdBOpWc\nQH7W052m95vZjbUgNke3ARKIugziBYHxOfC9KNuaJ8eqNQQ79TEvbPw0d6hb\nioIe\r\n=KBDs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICuLtsph5zfPn8KwFQJzGcPQwQmwzpgGv41bzh3Ij+fFAiEAyN7aBtG/5cWEcRxX5dUmOYT/LjjzIDD/OIJQJTQmrC4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.ef56465b.0_1589860100548_0.7803282684568882"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c22dcd71.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.c22dcd71.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c22dcd71.0","@material/mwc-tab":"0.16.0-canary.c22dcd71.0","@material/mwc-tab-scroller":"0.16.0-canary.c22dcd71.0","@material/tab-bar":"=7.0.0-canary.4497b86ed.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6a706d54228a517263b38bfc1185c9ebac4aae41","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a706d54228a517263b38bfc1185c9ebac4aae41/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.c22dcd71.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-bKZuK6FL0cgkduIxM+teFAqPtyGssYYDznBihvBvFMSMy/OSjoCIgEIW1BkR6l8rutME8c236XJ637ajN5kEJQ==","shasum":"082eda31452e50b15dfc73ce89659a9f20bd38aa","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.c22dcd71.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBZiCRA9TVsSAnZWagAA91wP/1karNW39Z103LTy84dA\nrN1mN0S8jyCD52YYbix3uV/sKQJkxc7OC98v5QmuXOQ/c00EuNbAJQF9Ct+t\nMyrQHTr6m1/743O9j/xwnY6vPQdnc+ufug5GfUPpasGTUPRhAF05G53JqBfM\nsFP3DPt5MRh4oguY26yiT0SQDZkD6Kpimy4u/VJZquEaaJ172boIcgWMBmIc\n48fALcaCBlEAKHsg5gzLabnAi/Zkpv6JXJTU5j0LC9hRHqGwko2ERQ9QWYKQ\nOD/3uVtbX45cSc3Zc8UpPCIlNKZHz1h8JxjNV0n5/7cV9l7z3ufQqCcZ/4Ik\nYaoMFdzxRP7RRjAsXEz2h5aeyxOVOnfjYbZvzlLnoDxSZnB4Iw5mZu/EJl47\ndEBARyJl8slPn6/UpKhP/HxVd+OVe1dsHDc8ED7R++rSjB1+9HVg6uvHhwaB\nFHtX44owhdzw2UGH672MoiMc/SZg+6OsSSFpBoeSTmmKKqRdWuVlX4ZS5I54\ncKOi652TmCNeYcyIfi105RP76VxGLhP/m7co+tM5LGDh4bKVN4w/La/hbGKM\n/d5afxOp3/kbLGLlg79/uZGEkKZ05znlfcKZzkiYr5ffQB3Btmk22LpdRqst\ncRGhzCuL3LPiBbtL0RP5g+CtC6kQNilqRmtq5Lu78GE+I6xYGRjcwuoFkgQa\n7B17\r\n=6VN9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEEro4mm8r26f/7KcOFO+z698+4VfWSO0ojDJXJiCKZPAiEA4CFoqLeXRfma2CIXCaGGiMOkA1OHDVuWIJCe3RyRwdY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.c22dcd71.0_1589909089630_0.027314448338053854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6eb62388.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.6eb62388.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6eb62388.0","@material/mwc-tab":"0.16.0-canary.6eb62388.0","@material/mwc-tab-scroller":"0.16.0-canary.6eb62388.0","@material/tab-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"abe9e974102de52260c3cc1347abe8592e0d5e7d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/abe9e974102de52260c3cc1347abe8592e0d5e7d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.6eb62388.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-GCUM7FjHKMtLV0305FkTIw7y5tYjUhwFwLJbGzaKEfgUv5bqRkwhq1yQWVGC0Wc7piFLtpqUTnkmmlzOMLujZQ==","shasum":"eb5f294fc2fe756146cee17384cecc4be6df6c7e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.6eb62388.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexEPZCRA9TVsSAnZWagAAY1IP/Ahid4E+8vqlqc2VF+Ui\nOk6YVWuu8HMH9odJ2rQyg2JS7azKUFsmQJnsHIliMyCswvFGEt3Gw7z+ydL+\nss6zs4TZss9i6IET6KeOeNboot9MZY013zMiB/FnsOGwgxZU2u5kZYrCPIWW\nNT8BKYJfc2vLoOGurcvj7XqgLtKqvO8EdN3j2/daYMYKkUNpUezpk/d/eDQp\nf+rv+kLhsz7gUCY0DsIqfSInZzD1BhRPcterDI62t855lEYJPihOdL+pki0M\nVLahHTx/fK9CKTdpQJlGZ9em06OQPtrmqh8fxeobbtCSQRJsHhAdxYVmO4jH\nzF7xC7AXanXAL5ndiydSdVTh1GVXkszepyNojPfsCxXHw+5Sv2/N/L8m6Vgq\nJl4pwiAhTdUYKrGQBhmPEYxq9mLn3r0eXiHSGoDS9d0LxNUT95xW5Or2Cp/K\nSd+g/B8eZbHsWjgCtjvJYTTtpaoUdNJtlqe3dx6y9iVricRhU3fbqFOpXcna\nOG1QcJCJcY/jdj/EiiA2B2o0noxP4Z8kbZZhZnTGLKocy3xL5IXCDvGWQnSv\ntwYQYYI4tAr2K8bRhbkASlMn7iYVhr+664HYxydh4TliFVTpaUbNjvyn15X0\nefwoFVaJ2rEgS7tyP+5/Gz3hY6d1Pkdfn6Ec4XmC5uvUtMkVrzCBVoi20CZc\nLXiZ\r\n=gRox\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtr//vk5FJ1aRiXtg/PUr5sMUFTlQeDgzFesY+meAkGwIhAJtzBpe6fEyqeL4jG5WjOyfKnwVr+v810Ig6XQLi1psa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.6eb62388.0_1589920728495_0.38398788803480555"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9bc3230c.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.9bc3230c.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9bc3230c.0","@material/mwc-tab":"0.16.0-canary.9bc3230c.0","@material/mwc-tab-scroller":"0.16.0-canary.9bc3230c.0","@material/tab-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f02ad2a44567ccdf91e52b6e07f5986d49d2b375","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f02ad2a44567ccdf91e52b6e07f5986d49d2b375/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.9bc3230c.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mUbVOJ+n/gG+IzxoSIDOe93KHS2Fm6RAHzyWjnYeXe1/q887eeADuf5GCS71iscErM0zico+YD7ebPGWwhh0IA==","shasum":"c6583b7f747133a46f47d9262ee9c6d80f9206c8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.9bc3230c.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexFIGCRA9TVsSAnZWagAAjDUQAICZfaDiXjl9YDJep26S\nhRtaWULIakiKcEM2iDtMdrT2qPAsU/mlJTnsk+xcDlS4BZcRnVDouBK3REpQ\nQW6yUq4QVvNHXFi6hTcRafjFeP0ojxFLD4RwlKgnJOAkDUM0tAuTrM2iBy8m\nS7qSEwhOTKdsiGwwdAZJba3LVyNcFctrxNShARtEqpG5SB4y+bFX2IImtitP\nb3PTmwt9ne00uuRAEJZKtfFs9ZwGXH6Qzd+7lsCoxU09bOb6v9YxwkZqcZA4\nFkVg/4Eap8vbtAoFYN/fTO2dJdt27tJAdVPZ/0zBAWJ5Bk5ZL5ueQs89Ss7e\nxGBpmgdtS7uu2RFvsD1FevfiTF8l782lZH6YdDscFq9H+EViTvfyttzqlSKU\nW5QfaYJlrAMvIU4Cni2nUo+d/uTOLqyY8IQzYU0ZIIhJFm1V3+cVBjKS2qu9\nxBD69rtSCRPKkgveBxIvsF4xxT62nEbNcZiR+EWnI9OcyifqQA8AEk7lD6X4\ni3QsctI7Yxm59BTtOzAapPw6Tzy6NZ6YIO4xti+veUOtSi9JIemkc09FE4np\nBPi0Jh5vtcj/cVrILtPN62i+Wzx4/HZpZe7b3scqKHqXQIj++79UWoeTNsn1\np589CGmmH2ca1itA1Qi9B8Z6IdVgEDERk6woZ/kYKx5ouHuPi2PnFG452f98\nBDLm\r\n=/Gk0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGUlKDNepGNK8qh/C0+m365+yLfYGHkaoQ42aHJbC8/zAiAdaYCFiCh3ZG+AtYNL9eu6fh/LyK5r17jQhtZNxg6yCA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.9bc3230c.0_1589924358226_0.7168578283918818"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.421a6856.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.421a6856.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.421a6856.0","@material/mwc-tab":"0.16.0-canary.421a6856.0","@material/mwc-tab-scroller":"0.16.0-canary.421a6856.0","@material/tab-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"caa535baf074d026cb6a6f50dad38341320274de","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/caa535baf074d026cb6a6f50dad38341320274de/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.421a6856.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-dhsM59ZULXSo+7i4yt+tXdIk7avsbaA7y4moVAnbxcSG+jdejXR59jOjF6APSDfoKcQAYnZ4XUnUyRmZlxqFgg==","shasum":"2a7f30d8bde67a2f68c31403cca817750a583639","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.421a6856.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexL8VCRA9TVsSAnZWagAASYoP/RTfWjedSY1qAuR46TYy\nmTyvYUZCxmf2tsYqLfVwoMdKLch8hlBQcOw9ioYQcOjBJfMUGu/RCGc5t+qJ\nQaFqjOUAIsfCKgpWfMVwA6hrQVplVfDn3eOSHJGBIaBvZ87QDdUsOjJk0MMK\nYEKlZvAlB5XFzFNp1dOrxe36CitfT3eI3rZOk6f9g+zXQpyGs+Gg37LJ6wf7\nI5/7FQOGLtgCuOJ1RbtxGbuSOxJCcX8yUPH5S+lh+40mYag7qDIMa72F2BYG\nMt3i0EviLQbODdMIaIIJfqofoJja6dXpHYUkGM0Na3iBENDa2TRjYsIM8RWJ\n8NckYk7jyHm5oAdJCDazIEAc7C5WSollYLSSI6VlORxZrY/yIYbCAU8iU9/C\neUHgEqfIy0Ntg/fLQxLngBqEc/VTklW2clOXKQwNF5MnG+GCfWUDyxXbBRNS\n/GTbCJhl+pkKKPzI9sOIdiROXQVTl21NKrN41bwShhdTywzB7h+ZtrJ4Kg8m\nhcvIcQshCPY8cdx//oDTz4nPQId4kFnTl7nucVQWUllJ3tqfgJnzegqkYewR\n1kghSymvSGiTU+ndnZ/K0KbjnkUh7rkhRRgTANd+Gg175Dz1iVc2lDdsLe1l\nGW3h7BLSFtHlVZraxwVP0qCTjHF2FVPlgYpmrONb2jCv0TEKDwcNauetOV5T\nM2Vp\r\n=Nbpx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjdUE0W7pJl5SwlLml/k1cqDJtVjGhf02+92A8c6lRKgIgSbO9Y0HIK7lNC7qKx/M3vqA8VLhvcj8rL6xOrbl34bg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.421a6856.0_1589952276732_0.2681618681673228"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.761aa6f2.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.761aa6f2.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.761aa6f2.0","@material/mwc-tab":"0.16.0-canary.761aa6f2.0","@material/mwc-tab-scroller":"0.16.0-canary.761aa6f2.0","@material/tab-bar":"=7.0.0-canary.e3eacefcc.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2888b72f42dfca39ebb17e6fe3df0f964d21febc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2888b72f42dfca39ebb17e6fe3df0f964d21febc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.761aa6f2.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mJdee5KQi1iYt5zk6s/4Ii3QJXMEUSdP4i5hhLRpf/6OTSzytMfhNmfiw0vS6RZFL3P+fvb+MfHBWy+R2Px/Ng==","shasum":"6af3b4ce07eefe32e8e29ebf0fd9c4e85963d135","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.761aa6f2.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaGzCRA9TVsSAnZWagAA1fAP/RQqSt6cBVaTIJuUm/31\nf+NxPTON+RSatah0/3byGD0QTcK3XER4MYPWQ4a4a+7a4/FmVmAr1U9BznJs\nDrgelCalibNnNt2Ad2TSrjeQ+k1Xeu5VI2T2m3rHFSyVr3m4lkTIuGKUbkKM\njhekAsfXLjuutyqKhG2NGTn9JR8n5U31Z6MPNP6lZwGiNckbeiApcD/PMbGh\n0yVr7hvon9oujnGN14gCgXegRQx8qHvfFnCR2Y9YHv6lcFXJdGuja4H/TH2V\n+SPAuDAlLEJpW6Tv/hb0rH0PiCpBSDVc2CZplmo52tNdCExEQsSLrjt7KXI2\nCFnJqKyIf1QNFLuDnn4SzWZ9/k7Aw+Fm9kLDNRuVxUM1UnW97nzSh3J9DR0x\nDorzOZAHoivuqjETVuRdfzZWcCNW1yyPDMYAQfKx/HecaqEtd+yIFyj4NoNA\nKh3upswZdKBl9Mlmb559yq0by+YlJEgEHpWSJL2j6QRWG9Yij+rKVKvtHss/\nKqgLmZbR+fn3//3XqGC27WvZM/nHhv3OmIJk6mNzMgy01A/qtuVJpQ55xCEX\nB7p9SslOERRHxlfP/Dpa8dp/x76UfJX7LT4ZavOGHdQsSOc9tPA57oitoErP\n3MMnpQieAhPaPZ3DhZc6UsEXR3ElbAZXx1bIpAPs7+zYHOmg7G0zpIPuXM8G\nziiD\r\n=z+s3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy2J4Rk7Kg9RE/aOsqcsE/92TYrdpXtBD0hReqwS2HNgIgJ+QAgPkSG7j0H7z3C/tP6xT6bzMqFR0sbEzVrRwnnW8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.761aa6f2.0_1590010289892_0.6978635441822514"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f8654c40.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.f8654c40.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f8654c40.0","@material/mwc-tab":"0.16.0-canary.f8654c40.0","@material/mwc-tab-scroller":"0.16.0-canary.f8654c40.0","@material/tab-bar":"=7.0.0-canary.4ebce8d78.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b845b0ec744d5631e466e04412254ba2fba6ec1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b845b0ec744d5631e466e04412254ba2fba6ec1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.f8654c40.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-1mjpztmANInhyaLm5u0btzkHDfOVKl3EfDlTcI7Hwyk9ah2Iia8395Aw15AuNEURMjNd/0vUvzLIXmukPyOTEg==","shasum":"b30b74408637553f156b7f9eb38e5fd6ed359f63","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.f8654c40.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexaPfCRA9TVsSAnZWagAAa80QAIS/a1UsDR/QjP24IZPK\nt/L56ELKpJm4Aw3kHUy+NgbxSw+RICMgs0udRSx5TO6trObONid0xtuODKlv\nsJ1BmaIiX81E83WY1dQbVeYYhVbYiANGSKlkm3UaWT4tBYWncEzUbfSPzqxx\ni/ur/w7LpmtN9iWGxPJGL8898vqsa+GgwV15wh6bcbC+gY3g36dod4jdiwhq\nyepuFsMgq0lMGLiSUFjPaoMIKxh5lCNhjR0/TBaMailAZ0SGavD3pqTgma1d\nM8+62kIyUP/SN9FbNoQKiJxpisWTmtf/en1q3qeZpHTpS229/32xXJLFSuxl\nw1SvXifmINBX8JMl7pyy8OyPuyUfcxLA2rAxKYHZce253nmTgnQPGaX7inqV\nhNMF8iNmyncWV9Runs8g6Fy468PrcGG5LICoiaKn0FwUZ5pl2bNGI8ErrtmM\nFU42OHM9bnJJv8o8YKLLveBB/yDlgI6jO8OsvT6m7zBLzUXvUq2KU8Mi2WVQ\n6sv4fGw1R55a/MP/fGN//IsPdy5vachnM/YPJbjTr5KhRJ7+q49s3m7DKVBZ\nXChfuEhU+quM/ZAvjmUWckUaD7/n2s7A+lD1hdtuoI97BLDitBN03MHKMyi/\n88QaEeduDAx5x5VMYhAy2iTaaGMgSpozF4kc1/KMuaTB7Ubb/QNietLZKrvC\n3CWu\r\n=7xg7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBF+FfdelhQomBpy/9bsa3UDSQA18KgWuqYS7/Ie0z7xAiBjRD4DBtfQrr05qFpX+eDMSEBHER6tuoKsB1mdOot7PQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.f8654c40.0_1590010846656_0.6017760516778301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.05f3853e.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.05f3853e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.05f3853e.0","@material/mwc-tab":"0.16.0-canary.05f3853e.0","@material/mwc-tab-scroller":"0.16.0-canary.05f3853e.0","@material/tab-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/47fd7bad9cbebba6f27bd4bc85aba3a4fe6dfeb4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.05f3853e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-lm6Zr/7z4df9RSt4w93VOiJy9YupSB/+P/6OnVyC3utZtgt5AmQFICgUzhNJMrGko2pv4ZdW7ycqZ9/znbXpWw==","shasum":"f0eaf4fcd17ee8fa5958172d040f78c42add9434","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.05f3853e.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrt0CRA9TVsSAnZWagAA9kEP/0G7z0JfZieYevredL16\nhbtMTXZsK4HTAyTj2sMKxl/i3GT3QW0eu6wf8oT5uLNEPRPX6Rasjw2LwbZZ\nvw/KN0ZBC6OvIRflOnaOv4JHtqF+So2vlCANhE4GRlIGT9vAChA2K3x1ynaH\nv8FnkNlQLeEri2bBsAN8IPUNzGki7ZExL/5jy2lRc5+3JWuguhTvFpRU1iWG\ndDGAh4MgAZbkEv8RhQDh/E7HppNbay8pts2nvaflef5WagGulWWttcifEsfJ\nePl+BNLh163g7UqCgfEax/0D8ss0MtFL07HC3Lron/OfH/sT0/t52IivMmHx\njPlBUsUiS23XlCNhDwqlweN4uxbGwPLds19B257ChMUA0HoKVKeRGk65LaZw\ncmmymJomhutH0MZCJY/UzsoEzlduyMYsOhaT2mU8rI+i1lxsd91bVNjMEUHQ\n1UDrJ+MjgyI5swGImvCVTn60z3oH1nbTOqwmxsH6TZbLpN4mdpr0YBRC3Wr4\n6xTgqM3MNKnx4SVBbzZPDcLDFuaHq8npmiU4QTA00xU03kQHMVdzIlFc+3TK\nuu2B3J+DbrIl/4KE/aqMONeU8tbDWHcg0rUN7d1ZLO9cuFU5OlnVbjAK86EV\nA4h4R5NIHHaTCRFHAZkaiilX1DALNMrkRhK77COOzKciz8ENNZbs8FNpTBn8\nOqAy\r\n=KMu1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCk8MWEv4J5X1ym3+pyDQf/FSfLAfwrSzQtzS8rONB8BwIhAOupNHryDYhZriS1fuuoEkobxz5525HGfnFCwZrvNIQe"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.05f3853e.0_1590082420194_0.2475652667419066"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5fe61f4e.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.5fe61f4e.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5fe61f4e.0","@material/mwc-tab":"0.16.0-canary.5fe61f4e.0","@material/mwc-tab-scroller":"0.16.0-canary.5fe61f4e.0","@material/tab-bar":"=7.0.0-canary.c67667e8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7b3ddcc96480928cfbc9538fcd5a840b5ba5205f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b3ddcc96480928cfbc9538fcd5a840b5ba5205f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.5fe61f4e.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-VFdSOCMdA9bjazT83KHt+n0y+av4zrMm92ZRWHmBU5GvTwVT0zWgj1fn4RW0NgN5HQCNtEOPDn0DvvoRSnz/xg==","shasum":"adb8392b17d43e13014967787ed3f5c41d48b675","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.5fe61f4e.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwnUCRA9TVsSAnZWagAAv+MP/3iyzzNd4SubfPT/8IYe\nO7OkJlvCq8LKxf0jb6BK0+iE1314E91q9lRBC22Z4XwApKGCmJR+nZH4JLg4\n+W0getIhnPyuhNXPg7UYfqY1+MvjNlw5sBCaxEkhSge+k37UpcLdOjK45ksj\nsvh8NWi9b0lrqj/W932kjrRaVajSqplzhaaouftIqdqzh5Z2MvRQk1MdmmZR\nBacBH19YNwDL+N83FhgIwNR59poETUFXGaWIC84VnrXXLcS7tPSOO9/yc33t\nGB1FbVS3sRnRS2ESGm+PsfaU+7K07WxRxnXRgefvitCvVr+mgNu/xg/V67YW\nyby+JxngtswGnVwKgQMVjdN4Ka8YGOKgwRcZDBlVha/tjBxiGf4RL9DhqqtG\nTeEXZQh6zuNjxvarkq/nx1BIJg4g4kPaJIll3/JFpWyOVEpx0R3JHU5hcFVt\nJm+KMM/NrWWBpEl41BaDza/jTFgG9WM2bSeIpqNbnwSuwbrEQR6rAT0qf1OL\n2pidPp4cIfYzooD6C31zGFhSc+GEAxxLaBcSuFRstylFC8LGMau9COGII2AP\n+IUNmA5pJ5EbzA/89FAS3kMycvFMf2x13xiGtsDwesmC+/8LKJDG6MOboHHe\nKQfV/BcD85xL+g1M1TU7805RcvvIZUxLeNHzudjqGd/D4PAkzS1sSSDV1fwO\nBXrM\r\n=2awl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCar/lS3z06U1zVbuotzkrPYdwIYfn9I4k93gi0tMbxcQIhAOKSjru7R9J7Qz0j+xMwH8RpP5uDSJrdB+Jzgt6Pa4x/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.5fe61f4e.0_1590102483849_0.6389505557413522"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.17d33745.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.17d33745.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.17d33745.0","@material/mwc-tab":"0.16.0-canary.17d33745.0","@material/mwc-tab-scroller":"0.16.0-canary.17d33745.0","@material/tab-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b97ea4369af06c50f10fd7a5fedf708bbbc380cf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97ea4369af06c50f10fd7a5fedf708bbbc380cf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.17d33745.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-Q5t7ViGibUR2sWRzIl2oc+r3/HtGRkaawx+1Ms6FSSKCJxqqALHn8UgGs/EHTXx6OHWnMs0uBUE3goZYbeKjeQ==","shasum":"d5c7bd1fccdca5545b38a3777c51dfcc6d313c8d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.17d33745.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezUBWCRA9TVsSAnZWagAAvD8P/041SggGsnvKxspLnapk\nx6rZsOUClpbi2y/RDBipZFo01Og0XpJPF8T3mkEKw9v227SslB0dLYk3a3E8\ndpoaPFGNdmaEfGvJNwHlQgs/H3AOy5grXBTXMj82LVECW0faR+EtDINLizvK\nKB+Ss0CX/vJvicS6q4YzIAdL6n2h8ujwfRZMpk6oP8hvMNSZMVr+3fj2j+sp\ndfzEWI9LC9OMAsB1JsyRzUgUHBAo0u8eSeMgR6BW/ifUQQtvXoTI9+1xiM7Q\nDMJjrFNcNaDXftNIN2RS3ss/6R+9XUgr8cDDGIG+auS/hQM5hc/uWbJK3Lb0\nFBpAPvCG373BHXO7z5nTLmolkTfuPXTDU2BFmSZFqKzEnOMBggvp1G1TFNOZ\nRvyA4lNCcoZRsOzUXEucSqLsb3bJ/s3n5TKlkVBDXznFwOea1+8enuSGX++X\npM/b96fKdMcVZIZXPw46d6b6oIwjxUpEJ4p5JYY4EnrjlKs+Kq3eSz+fitcx\n8/IGfSwrruRTj5hFRJIPcnaHX6LslrOe3NhEOpVcIDQHCW1Y9O1D38BIsFhS\nQko6yZ7WecMZe+P44W3RUceh6XkuQGn8FqnfmV7q/fECMKvTSJ0V+kMsC0yZ\nlqGKmU0K5UyBLTxes/8/aiE0xnKlK6QAQcsN5a0Xviuvle+wPzbxf83QZljx\nv5kw\r\n=EXBy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFF27b0n+eRtChQhbTu4O2LMimLrtVfRjHjDhMGmoNMmAiAmHJ03SQYn0M4xygFs/EYQTVDJ63KQHtwomuWW+N0ANA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.17d33745.0_1590509653502_0.8115433181861846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e8b52f5b.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.e8b52f5b.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e8b52f5b.0","@material/mwc-tab":"0.16.0-canary.e8b52f5b.0","@material/mwc-tab-scroller":"0.16.0-canary.e8b52f5b.0","@material/tab-bar":"=7.0.0-canary.c113fc942.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2877bdfbc0560854bc1aab7aee7ca63f798613ed","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2877bdfbc0560854bc1aab7aee7ca63f798613ed/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.e8b52f5b.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-axdNJ60Sx1cdqivS5MyGlE1KrSik//4PrP3nomUFpcJj8EQq1YkMbRfiuWsKRCTprWehqiqZxbiO1HmAC0rpZQ==","shasum":"f05378e13fb106db644935e97c844bcbada8c4f6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.e8b52f5b.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWNCCRA9TVsSAnZWagAAawIP/39JONk4d+JmcMpSPasH\nB8IoQ6qY6MrdDP+qmG4+3EuPJNiBdI1reX03wTzePI2FlHXaWIGSGVbn8rrG\nVyONoPLkBqOPR9Yk5UnaK2csMEiIytDV6JSOqrUxpUSvES7BQMuuvpN88EbA\n9GRgpvYeXbwdN93/SHYM3FURzoSI/8v4YCk+FYArUBXtOzcHp1ZIdv7XtXB5\nQDBRkEv0IxKbbx5Z7QM5UHVqbn3/QP/piKjxvy+Tl8/fi3KRUVK3XNypsHHM\nhzAfh7wgzlqFRJ2Jj7/2lBdDuYrwVc3hfZeDayc9Z0S0WP6ZN19r4wNnMemu\nucvd1k0T1EnSKTaU6GGio0NPkVq3/jl5lDuO4Y8XQkBcxGNeLoa9VNV10BtK\nbqV7JBQFboF5/yiYLcTdwq3M+86Gy+dnDYf3rbWDzNKQ4Vzwwut5dlgqoSb+\nFKNwfgHrEVBMNVm5uGmssb6ey9MvqWaPIPMQuTDelSLgt4egVFKLPGnquE6s\nr4eBsH/+NZHctW5EH1wmyCpqsrbs6GzdwFsYsbqSWvthXrQ8MBG2lbt22Hlp\nKLI+dVsIqxxhE4IrU6cGmJTPmvCCr45irjMqp5u2TqDbrdXCn/UCwvp5K+aJ\nhf3ow3TkkP+K2I1mdBg4uC1mcx5erWPCxwDjPCJ4+VPgkCVZ+RwUt9fbMtdB\nYgw+\r\n=EgRz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnF7CEfVH847hM+9+xIKcV17udLuciR4BYf3OSuuMy8AiBxHfkquVyx6kVPGDq/MI8rIxIrKQwVvAG633J4IJpJQg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.e8b52f5b.0_1590518594378_0.012577183960664762"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.09afa0a9.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.09afa0a9.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.09afa0a9.0","@material/mwc-tab":"0.16.0-canary.09afa0a9.0","@material/mwc-tab-scroller":"0.16.0-canary.09afa0a9.0","@material/tab-bar":"=7.0.0-canary.01de07011.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"924f688ba033093a21706afcd1d5b3dea4527355","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/924f688ba033093a21706afcd1d5b3dea4527355/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.09afa0a9.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-/XJOBJTy6lqFj2bO2vsNJQkq4YMsZn1bgtduTRMSmNUfGcdv+ZKvwCnTTCh8yR15NX/7yR4a3pvxmN0k5fhB8g==","shasum":"fd7e216fc927e12060b967eec0c987b47320408e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.09afa0a9.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezY2+CRA9TVsSAnZWagAAX4UP/1KN1MXx/J6l/hYbnTc4\nQtsGkodzq8NCzAhh2HppG6SH9L0EJF1wlrpKD+RXlPk4Suw1r4Xum+8HElSR\ngy8dq7hMgEGsBZJcEvg+oISOl0osSdC4dg0nwQyFvXPGzmHiGHiGCoXNtrgf\nyXW8J6KfLpGg/uhBHqxaeyTFDF09hVS4g1WuLzdHmIww3FC4SwPSqa7juOb1\nmr/xWQ8SDp0ZWwLEW6K//Wsu47c9DPGEdEOZV6xzj2x6DeGm/OtWSgc5baX+\nCTO5DL10Wr6lR3ATnVS6HwDEW+fVfDKBsTVuvnSz1U+EjOAAlsFCC/0fwKHg\ncWNcCsaJWz/pGuVfoSa9xe04CUb7FYTSgn2T1T8ssuDPPgZk59qWta0xOvdd\nUHcDl7WNhIH2NHsRkZFjGMU3N66uTwpQensMyDudc3yRfTFAMESWcesRzHQO\n20Ms/Ti4mfmfmrIw6nRKOhHyznMAqAkpN4vhhBtQJq4koKvIxiJXaFuFurUx\n317N/mwjkIUjNMDUxjN8+IsvlfQ23JAokEi+b7xi6E8IoyrTMnCIuToVz1fI\nN2BLR0boAtAp4fPiyZSIRORS4dEl9L3ZHybcC4skMmFmt8OVfxa+BmfbXfIP\nrm1zCmBCAzpMZv23duN3XXgET/zzzGOajDsDx+iwGqUwDVXDeaMBu2BEs9lt\n9R3C\r\n=FYuQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZytR0akB5CSFN2ZYk7Sfilw0n8IDxTchx8wb+1w9esAiARsdmxAxAeUGNMiXI/rSL8Of4ErY2zbu1+7TdlzrtgVA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.09afa0a9.0_1590529470304_0.05167949828795204"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58bc9166.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.58bc9166.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58bc9166.0","@material/mwc-tab":"0.16.0-canary.58bc9166.0","@material/mwc-tab-scroller":"0.16.0-canary.58bc9166.0","@material/tab-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"71845a1e43b7378230bcb8e8fec40f195da11c2c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/71845a1e43b7378230bcb8e8fec40f195da11c2c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.58bc9166.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-6b9IRMRH5hCoHp+JuKaJjiubq2nEpAfjaxVBFL4dgxVtCm9SGATk0lHk6SYYxpSPu4VF8Uo1PwrpAyIxbLTFSg==","shasum":"4c181ff3d2d0804bcaa77b745a63f6ef6fd04c18","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.58bc9166.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezbSyCRA9TVsSAnZWagAA620P/1j+MuNGo2wwVbl/bRcy\nwurIAKwvAp9kT+RjPD7g9a7GNHmn3VvJZ/KM5Jl7Ca0qrtKWMl4BMfB5zDWd\n29M7BGH/e41rr1TEUA+9YUBTllIR8u48HgxE+A4J+ppbiO0rAguqTAn9TfEQ\nXC05gwF4Mx8U3Tjzq6QZWhE/gtLIaIC4H5P2Bc9eMtoZ5v20rPre3NllU+Tp\n8ZLFRgeb3TpULvpopvTVj3/hD+hVEqSyjFWpdB0i/kGmMr40XaUJgDVl1Ut9\nvwcHzFKlfIUyp3WEVHcg8zyyH/xfKgpkc1qAiTTsYQ09t6OUMAs18DUGIjDO\n1dv9ZOebmJEuBg4uryNLSkaqvCYUF47UN2xa7PRdFrfhvPaQilI9y6C/2a51\nW8JbZUDm5zctB7mhMdgnDEIonV2FkOmsATR6bDLh6iQiqdlXq0LY/TnV7g9J\nAnLuTHEV0vk7UVxGUrkbYgnB9EFdMLvtDNvqCkpPAJ4TCGpP9sYIUHWUVe3o\nUdZyBhWSOPDkVaUirvSX8/A41yzXFidyn1BR/+aUA5vkaNKbgarcKGqHbSkX\nr799OXHtMGVRIz49rzPsfs5PubK0YBTitZiVjPMlvwfyhuJi0oVsqG7Jyg7i\nLMvFGh23ioSH7Qy50exAZdWswrQaUo48FNKEstVqXrXNRVF4Cg3M2+s/rhhM\n+LkH\r\n=+Evw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiQMBFQrcpa6yNXBmSj1l6VA817nwgygyUR6I0nlTubwIgFnCezaUdTc5227WsG0IHcEGbtlkSYpuHSxLOI2hqxnk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.58bc9166.0_1590539442279_0.7438976366867971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.43bde144.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.43bde144.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.43bde144.0","@material/mwc-tab":"0.16.0-canary.43bde144.0","@material/mwc-tab-scroller":"0.16.0-canary.43bde144.0","@material/tab-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"eb504ac1efc09a16041fabd1f3fbe62a49717c77","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb504ac1efc09a16041fabd1f3fbe62a49717c77/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.43bde144.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-YVdABmO5mxBa5B0+9pwI5+ZI3pPQRaX5hiBabVtcPKt30rg/yWqpjKeDiAGle12Lv+K+tWgDviIB93S0UAcFLA==","shasum":"e948ee98c9d39e8a48bfb7996d1038b8ba2d614e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.43bde144.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrGRCRA9TVsSAnZWagAAgNUQAI5FgoskwpVyKyJNWMqD\nKo5MPAY0wt2ghPanVOSj5SBEiuMmB3KVlnag1HoKRy2UakgRYmIJBaWm1b9E\nWTil2ZNy6QWOp/4IVf/UrLFJepYzz0vDATOXtxZblGbLB31DamToThrB95Sy\ngUIVvs1MpqH1NoE91AAEzuzFbnsyKwQvFdQu0qTFK80u+67dLIdHMOqNkx8w\nApnVVcw2qZzq2AgZJnRuV+MIHDM6F5RFFs53RleK8mh4yhRCJ0CEnONARNMD\nDmWSl/3EPbCbEpAogdI7Bl9IQxei6CJKCIQHHGqLffBXhHuXuqq5AzbLMSdA\ngU32TJ5JsMSwYaTgieUjmJ+E2jPmWDLvOyZ1wDjAawZX1/9l6X4sDdbNGw7k\n9aQEvJfX2zaxjg6QdY/mCrAhFgG77Cqo6LaD97hT0TyPJ0KTeMSZSrZxKNvp\nPGOKqp6pD6enW/vjqfdokqOgcD7aSwOSu1Ldyw2teJsgDpO0LXmf8VPqlwJS\nYw0tKNZKEtk+8o3W5Yop+381Sg1tNng2vSN9KG1so5kvd2BSGP1pCUtRn5PW\n1g28wBQ4Qq3G2OUaLURzEwlVtE/cGSBh/w+5/sntyiOUQOtWzei9kLPKkPJL\nkuIsI1e15fGkSZglkzvKOpGA61cQz2vNPgb51IATMYFvJOeNyANs6VtxkWBH\noawO\r\n=tZU7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGwm1XDQU9c+NwmmYYfFvhLPVv2tkokpGI0FF4pYKaoAiEAu8tB6MFEJ4Gn8grgfCV9wNIfc19XwwON0Z7TWaFkeZc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.43bde144.0_1590604177487_0.8617267324952136"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51067bbc.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.51067bbc.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51067bbc.0","@material/mwc-tab":"0.16.0-canary.51067bbc.0","@material/mwc-tab-scroller":"0.16.0-canary.51067bbc.0","@material/tab-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5dc99bc495fa061e0960f717c69cf33620115937","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5dc99bc495fa061e0960f717c69cf33620115937/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.51067bbc.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-wjIf1MBWV5jd2BejExoQHem4WxV0jbPll1gWIOMmuRYZhMJfxemdQW6qz7tlp2a4+47tUk79igB95W3vYuwp7w==","shasum":"1f4113d2fef26c144065261961423a3d2a2ae8a3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.51067bbc.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezseXCRA9TVsSAnZWagAAnugP/R6SRIv8K+frxg0R2VcU\nhNuRphJPmt6rB2An0DWRahE/M9kn4w/3UD9NDyuqP4TCpSOKpP8x85ODIAbT\ncz6ogu5UlijzzH22M22tIYiFSCQyjxWmJHYpe1b2zYIWYJeUhSSFGtHVfst3\nVRlOhXw8X5SBVJHpCW2ix2qRaXxJrjbHFVIir2iSXJ5g6WxwPZjbwj/ofvTQ\nUxJgdo3fubjunOI7SYmIPiVZJZ1+BmmiLBBwSPhbXnYP3Ruh7F+rVbsbn0o/\nI/CMRFLzKzuQUJNqAldkNXokJeiPy6lSJSYSpQXLPnAcICbolu8xnFPn4uan\nYAgZ6aWkaWDHfdoAc0x15ilDr+3BNMQpW/CNaf0Hqe+XRqdMu0/X7o/LhqIE\nEVIDNWHXh/kk7D87Urz07/bJrfyZyZweIbNCYXf/n/59imAwpYDxEbDKSUf7\n5HjU/gF//pbVOvpSnifE5XvL/VOm3PL37e2soIKQeucNZla6eqhdm4S3QzWO\nbhDrV/vymaOAASgWwAkFZLgLgrCKRPAi/Wa0dXfHF3FPAlkc1yNu0o0ji5Bd\ne/BxkNaSsanLGoLdjSF///dUuhM5IbLQoVKtg5EZKlXjxWyWD4kchnSbje3M\n9zXWqshuQ6m9krPMEthQ3m8QljxFaKf05Rx87gxx7h8tzEgFtkbKbfh36LbQ\nyzHf\r\n=YDs+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoKr2iwNnf+i5HADMNwDx5x3Rq27OBPGT2/gLuKy7bvAiEAt48TfxHG4kg2DS5W5DFGzys/1tyor8iSzbTS9mXkq8Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.51067bbc.0_1590609815057_0.09293799945877379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.92751ffa.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.92751ffa.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.92751ffa.0","@material/mwc-tab":"0.16.0-canary.92751ffa.0","@material/mwc-tab-scroller":"0.16.0-canary.92751ffa.0","@material/tab-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"534233b7f60f5860c6a4bd35799b98a3c5d277b1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/534233b7f60f5860c6a4bd35799b98a3c5d277b1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.92751ffa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-mSuZ7Xf8qsiyjai8oxJhRjAdBQqmGW3lnUz6rktOso23ENrVsPGSmKwK9vWjbGhbpZ8g/1ocxs0Jwjr5PRA5xg==","shasum":"645d82e60fd5698b379a56f4c10b63386af42ceb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.92751ffa.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt10CRA9TVsSAnZWagAAcX0P+wVsCj6qAF6xvqqbkcun\nA72WzBQcr7Djj7i94/lQdC3o0wgCmM20XjJFv3qnYUVrcdW8mLBVTXEB7hVg\nDZEwnV+GpagLVCrAFvF+NOUz9vGaX027NPZIlkqZObCXA0ZKutiOhADidBrB\nt1bCDfPOIdbzCu1Y27ZOrWpHPDS6mwQ/auWE9s4DCwK5q7PUNtvSLNKGhudA\nBBHXXIRbjJcRJV0gajCBT4fzcPAbNdkA11FmpQkJJsPdq6GBNIe9tldbqyzS\nlIwOB+upeh38M29pYKwym27GlIuccyIUrDqgbACEd8dM//j97eWECCgnFG5g\niQtHFOqVTo6F6luoxoygrGiylIgHSdPXhM410H1QqXG4ru+7pzrFlkDg98ob\ntYFlwqUFWHsOO2nNAgXDRNXE6j8y1qUj8aiaeFX6S30cKkjWZGf8Rt9DVvzH\nvfZJAt+F9Ygnv+BlknyW14F+6fIr0cS1yFeEO8h6nNBahMBCCiPONmk+b2aj\nt/Wss66C50y9wFYUJL0HVIHlB9ieubfmjHq9KU0dG2qfFZRk2RzeBicqdIbe\nc3vs8l6DeDv2Xb1+d0D5dSPcQR/dyFzFmVD96IKKZkS0Xrt5niFSwv67IA1a\nb0psN4NL8h1MInEc9cK+oIMI8zXSgghpij1A9sRQkHn/AMa6eAgVI7HV7RI0\nVmRn\r\n=xxNq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICsYFUsCeDGw3SvjnsSUw8a2PIhiPE2zRAZth1oJ/GbCAiBaJ/NHqHGJR15iStwh5VBGoMNqOMoVeK3r+08kOr0yGQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.92751ffa.0_1590615412226_0.8327429895572251"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.aa2b40bb.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.aa2b40bb.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.aa2b40bb.0","@material/mwc-tab":"0.16.0-canary.aa2b40bb.0","@material/mwc-tab-scroller":"0.16.0-canary.aa2b40bb.0","@material/tab-bar":"=7.0.0-canary.d91794c7e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da9556d449ea1f3ddfce5e0978fba83f759a1e3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da9556d449ea1f3ddfce5e0978fba83f759a1e3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.aa2b40bb.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-n7orHH0JT6EQ0UBGXB/cDA4iLrEPZLgHx4GNfi+pXCsf+pcujnRyKCJNSnaDCtAGqDa47naIvaXMKCil/JTzeQ==","shasum":"7dbff89d17d9534ebe55494756462260298be4bf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.aa2b40bb.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0A3NCRA9TVsSAnZWagAAo6cQAKMtJyR5S3xEpOdDYEO0\nMVFsvQXgaopghrj2Q94unAtXiQk6U+/86SEVJ2T2Ju2m+WV1oVCIjqMyUIs1\nZVZ/XGLylc4Sl2oSehBw1hqbJJ+k3FX3ZKqaOjEIpkU5jSWTs3o3/PJEEq8g\nHBIfQM8qIJWUeTatq2dhOt8ihrXRK+qjzjBog6CMXFF6yfq4HnR2n5LbcKaP\nMuoHBDaAkFH1mPVaLNDw7GG5BV3Od0dZ2Y4sX77hwuudfA5x7/4IhtcXIsYH\ndKxF8B9+ZM+2J7+NItVhSZOI4XIWUg8WGJGaLOqLfnxBInqm4xDwHxAnG9Po\nhcAu9tiQzd4whQiuvTsAaFtERKzj2aoCrAF+HnBIhq6EM6URrlN8XA2YsAao\nTCblcxPLKQDloZd+TI+BH35nIoZQXOHaMvd6wAKh7+LpDU43yHLKIeKcsgck\nRVd2DqdPz+kZ4Q2vE6iPpDaexFZyIW0kjcC6bLHk9ErwpcSidCVkvloAQqVQ\nuGWVmTPugN/zN8zvGisP0DPmHmA0q01IiHstMnJEi02tZJdGO9bfPjGAV3d0\niBA0LsT+KgvQ9X2dpAppsMEMeAANrhPrc0krQB7rceqGZfSJlrFevMzensok\nHWyZLU7Wat9pCoANSV7NI89ms64O/vD8SCWDLAp/jSi3ULZj60diSnaQMX6+\nlM4+\r\n=Vtmb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIt3Gu1oKd/sHEmJ/4v2PzY7qR7GVA9bvAd3wtdRSrfAiAnYK3d4EGShg6ckgPsy+3JGCLZG/9NvIx2NrsnTPpHfg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.aa2b40bb.0_1590693324789_0.3848738483034275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.1a870a01.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.1a870a01.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.1a870a01.0","@material/mwc-tab":"0.16.0-canary.1a870a01.0","@material/mwc-tab-scroller":"0.16.0-canary.1a870a01.0","@material/tab-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f9a61196d2e2f42c5bfffe7dbe30411a16b908a1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f9a61196d2e2f42c5bfffe7dbe30411a16b908a1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.1a870a01.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-s1Am8sch9zVmD3lmoBNS33xqc06Va6rmjX1S+2HZ8KyrSq/AdnFHZjq9kgP8bU/a5xm0ThXQ/t/ZdPMebnWqMA==","shasum":"1e0fa97bf464880a9050eb8f6fb591b0697ea85b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.1a870a01.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0CrDCRA9TVsSAnZWagAAmOUP/04BYXq0aWKMnHKbtDs2\nn5Z7m4u5PQcP+M6kwqMPn5cAwi0AbmF9FUp8FeylBkaq07VmXv7ZAtw3giGe\nORZd7XwDfgvPfTlUr+ygg+sgucWrUdVdp/KTRJkQORdZ0pmYsmqbYzjYAJDS\nIGDF7K7KOQl0EpNB8BnGE1U5EUHcsSTKkG1cnxeUliWmQmIwxVvBQXYdTaz/\nHgAIbgSkAsxiQimGa/vMvZszCzc3JrhckTnRzzhktRVGe8YX6YGhKP59/BqD\nt8PdrCcLtaRSzCescRpiGNzxONb/3itkyiptnN99fCHxpDJOOmFHv01WIb+X\n1/jY44/KPfFJytE8Ag+o+v/Y8MGfFl99jNJKubBv87HRtI2rlm4x5AdIk1hp\nIw49DnbzPXbvzS+/1RrgkP4pBaQj2s2MxttNIMz7EF/Cq3F9C92qyXbzuHq/\nGUJNHdJ4gClgbLaukvbA32yC9OXZWyq96VNCXC233r5IZkd4NuNcvvGbznwB\nocUvxwZpYtlAzvjn8ZqQ8WnUqnvPMiMPoxRhc59vFzRp2D+Gbf3E4P/P12Qx\ntPL986cxbtz2VEYHEDIz0TZoUNILlSegHeRG5xdEF1jvRHPpe5It/4NnIOro\nfgcasobcLAm2LEdazW1g/grGT7fv3ypE7LFOA2m5DLBoKR3zLcU4kUlPh2vR\nFToS\r\n=uddk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrktaBqJ9+Pr5fe/Al5DU7wwBBmh2Pr6I2sFN1JvG5DQIgOVRZp+Hx5ZU327kGR+VimqMKzvk39UZn4PEyfoiICok="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.1a870a01.0_1590700739215_0.20926996488646754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ad57d086.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.ad57d086.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ad57d086.0","@material/mwc-tab":"0.16.0-canary.ad57d086.0","@material/mwc-tab-scroller":"0.16.0-canary.ad57d086.0","@material/tab-bar":"=7.0.0-canary.d66d22bf9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"718a29a398b0baad30119bd852a5e1bf4d8e8e3c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/718a29a398b0baad30119bd852a5e1bf4d8e8e3c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.ad57d086.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vSM7zbp2brgCtbRcFL3mblcONP+1g5KZdgYL92Ot4Au522iRNr+YAevqrRiawE555VYQBpZJhLf7QuBgJTQ+ng==","shasum":"538382c7f6619471b2ae50910e4573dfd2e234a0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.ad57d086.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0Z+NCRA9TVsSAnZWagAAS30P/1/Wg1yE3T1+2gJrZg53\n8vZyEiuU4oUgV0V/UDFFXEgoLT/wSM/XXtiZrKJTtLqC9lSmjPE41lMDu/Hs\nAZLGJPsjecS73U7EoN6qfDUz2e+fOguYv5t3a1IUSlk/6HXbay5kuv/DsCTe\nI96KXqlhItlfN2Hk6DNU86JRLb5UbkZFP/wQliT5jo3+xWDymVpSaqsd15uI\nbesn26Rq3jEdM6tbeZJWIVDYY6NOIoXZC2ULQOme7GAvHlsaVe9LLVzXE091\nVQXoGSdm007q/2+oFEIvszJl3BRmp5KcyWzj20qhfjghKuR+zI1iuq5JTttT\nRsFNTzjAcBI8GwfoaccLIY791/oUOMe2RvErVo7hse40Pwh8ESYqTS0HqDDy\nn3NRr016kfIQ5fLiw1VUJnuP3VY34QCgbhT46S2MiWrlLpjDgPVixA7o7Wfx\nrdG0yJYf88/VZxBz5d31lW9xLT74SPapBy+cYvEOK2MVnWSMsHjYTtUM4T/i\nHLc6TCe8KcgiMiB+90C8qQKaE4VcncYWTQBnwkuLk9EhNonv9lQOqHJqr0FZ\nw3xrKj8zM0Qok3HmrKJAouOKzDgXFG7Osvbuyc21TDyAZZshr4hUMNueLUwK\nJCPOsdvFuCkKUk0HfoX6akwoQCqgK3Fp+JiBte7OqIaCXab0Wv2ETmB5aykj\ngKA6\r\n=yYNS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCI+dBEX1cTV+s9DpCqHnZDjYsxJEIuZt/3tjTDXCYuuAIhAPGeHnPZWT0udKwmvkoVoeIzzxW8ib/mHo8FJijPCu6i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.ad57d086.0_1590796172877_0.2919337406677145"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.3bf2b4d5.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.3bf2b4d5.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.3bf2b4d5.0","@material/mwc-tab":"0.16.0-canary.3bf2b4d5.0","@material/mwc-tab-scroller":"0.16.0-canary.3bf2b4d5.0","@material/tab-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"796a0757a7808c623433691d3c52ef63cda47751","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/796a0757a7808c623433691d3c52ef63cda47751/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.3bf2b4d5.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-QMJL2gEIawxc6VrtfXYbEZfLaEwKV29rGd+8bs7kXr3LzhXygskqAX5eh3r+LjvT75AhWFJJLrw9FppaxKLgzg==","shasum":"baede83c1b9f3ba342c429009d108f7cb868c25c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.3bf2b4d5.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0aq1CRA9TVsSAnZWagAA3cgP/2JjILELrkrcOC02Elae\n+cgDHPMP4oaGrW7n/GuHBP0JNlt/ndcfo9U2Bu4fkKB46jU6HiyLFvd0JbgB\nrNAR8LDSEZbrBwXoT9EqgOKpxo68uOXUkATAi42nDJOKx+eGt+fEoZMQ58g5\niSqb1Pk2K5pDdYJ/QQJFCCYDBQ4CPc9RnUIU29hHgMoX60PlnGNy/iR7m9rQ\niml4carDsvXdKwvTyrd4h89cBVYKWlifKJS+trXujM9mzVcqtPv1jm5hdefE\nBMUlKhnHwvKtMQWqbH5FE1iIidv50SFNlRNmAhrsYrAhwbPeJLn0dsTDAH3j\nRE5BHMn6vHY97LVbi625th8pTrf2dyTE1O3FWErXYxQ1CGfygo2EIqTTtvG4\ngm16KYlX3YPID7/Ntfpg4QLJRJsxKL4kyRobaKsBVsWDZXUWkJ2P30SI0u8z\nU4y+hCoggJ54Jv6rXwYptKWovB8G4+nsKZk3+FW1QeTVO0keZUmbULX62h6l\n6Ixct3vqWpj13BBRNLYK84xKNfDhcNlhi72nkXlUSUGYZ9bOsFMJ4278GIBD\nbJQmQ8yu6WxJjeP+m+VlMS34vYdgFcmXgT7keg9aNqk1rYeT6gyRj6kVXeWH\nSSuFuF4NpiFTuCT1rulFBLpXwYUfPjqR/P4nYuvDqci1IZMtyxfBAcdjKqrE\nLiod\r\n=brOT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDwHkNkAz8j5/sreMDtcRZGpRLaGT35rDen4zwvecjWgAiAOdKWfIShF6WsU5v2Hu8esy0F3iXnl7XG4y1/NrCiJvQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.3bf2b4d5.0_1590799029021_0.53467864054103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.ac05f090.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.ac05f090.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.ac05f090.0","@material/mwc-tab":"0.16.0-canary.ac05f090.0","@material/mwc-tab-scroller":"0.16.0-canary.ac05f090.0","@material/tab-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dcf12105ac71a486ee350d7b7fafeee2e7fbba2a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcf12105ac71a486ee350d7b7fafeee2e7fbba2a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.ac05f090.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-vpvQlx5dB+oN2kBgwjwzjaliUt50kkTvg08CPI/aCoafj6pVVv1ncZHrVCoaPc1Saef5DghN8gpkYhtREKEBpQ==","shasum":"1794f0eef79fd75688dab1bff64e58ddab0defbe","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.ac05f090.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0cniCRA9TVsSAnZWagAAuTgP/0uTCyXWdXUztKYpiZqT\nqphHDDyDcyKbBzVqEoE5cPQFc8n3Xm/y97h7eS10wJb5Nu+f0osxyIGqcKy0\n3olX+lInTpFLx/gNEL55ozOfPjatfDWctjbZHjWFdBK+WMWRX9kt99+4k6N2\nMna5n54Wajo62a6OtrJiZlRG7an83Vt/3i7j26b/uSTyQjjogUtfTvdBA8wb\nXKzj/9+wVZaHOWWRmKZ+FuVIfdedj8/Zx8dmI/uxJRju3mFy7Gqj8MkxbqGB\n3Ay1tPPAxYBbAXv8R7lQIoDgAepmNlfvY2gSJ7CltU6B9UmgLqBb9UDmEt6h\nt3uvl22jp7TomQHTjFY0MrRtFSOnZFiv9p0UFZBIvosAqszwczBxa442S7Mp\nrFol3LZnbQ08b3jG8CrQwtHLSsTzeqRRpX4rX0ySbWUxDKWkJtrdA9NdNwUU\nTuze5sF/Fxiq8aaMbvsb8yQKCE0+SE2qPE1w8cEYF7Mun7lZn+zbY38aNUcS\nZbwScR0/0rZg9RkqCSjlC/dX7C5gmLpet6nozbBTrnIhjU3R97CkE0VL9Y4e\n91NQZ0/3gHqBnLAWNP/traKqC6LFle/6MdcXDUSiU0KnhSlT+MrDp+r0X96c\nmhg4x3L08TIzw7nnwy/Q4VUZbKdTvxmwe9JE/ypWshue445W2zBz3NGnwgpz\nPhZd\r\n=e/HH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2bEVCCe/Prs4VPuaRRuX36vNcM+gGW82gaik0ri2lSAIgSXuFFUIV1co6nupxLKkgiZ/DxE5qF/+5hWqsh0E6BJ8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.ac05f090.0_1590807010167_0.9726069272481781"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.0ba7b095.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.0ba7b095.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.0ba7b095.0","@material/mwc-tab":"0.16.0-canary.0ba7b095.0","@material/mwc-tab-scroller":"0.16.0-canary.0ba7b095.0","@material/tab-bar":"=7.0.0-canary.8073a20a9.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ea87617c8c9beaed33b593554f344296ff2b1702","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea87617c8c9beaed33b593554f344296ff2b1702/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.0ba7b095.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-zS/FHNnYpbOxkLSomtuEza5QuZ57ibWYGvbCX53xyQc80h1Ijyf4BA2elF4gCDrAUoGTqJMFfGhiOx/L7ERTzQ==","shasum":"c3acb3eadccb475852d16b7d21b1159e2b5ef47c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.0ba7b095.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ct0CRA9TVsSAnZWagAAygEQAI9ENnPwAPVr9gwYGVYw\nQPu7Y8kfFUD0cVBtXdfBhDGADOsX0I4U4F9bvvUPKqlndWd0t1zh+Niz47jF\n06Zsjrh/UotdVakxz3DK8ymjG7eE0PSpYNd9Cee4AS0pagwvlcikM2URaKMy\npr7nSaWxTnLQePzYjO53RmKqH2k9smlc+gq4vJzBuydIyHdOXJAtlEAjgOZn\nAKX4IU6CH7tdhKc43vD/TA7chUoCEnqU3czbozoVJ3rYv8kAZwmiXKOt8mbJ\nsFgFNLF76LI7Uh6aQDUP6USfCc4tdlpng5wGWYEJdBjZCW79fYMpQ3sMHtFl\n4RsffDyN3D3HywU24rmeXUed7zps0zfnZyrjdAxmJ6YVe69zgW+HfETYTP8Q\ncRdN8oXjafV2597ru8JbDPSqIicMFFjHRhE/HxhEBTZ8dml6Yls9BqGYNIZ5\n4A3QoFoc+2t4/+qpkhEfARAg5efG1yyAusRBPcnqW6SDI54zI1B2Jg+KOeNt\nreNYwSMUTAyWaw+sXMbkrYaJcHFrPdPkuOazavVc48lOKMVWvPY/iQg6GIf7\nzgNRUYVv5cm3HDffLKxsD8r7JWrTVi/D01ds1mdLI94xtg7r+43oRforUPmU\n0jc9oLwYFyvkFNSt8E6oZ1xFlKPuhAn6fsn75yZrBUR8QLXQjm6W3h+aXrSq\n9LDq\r\n=LA1L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUY7hvw5otHQ0j1NJxKes0n5BwFPg/wRkx/MxRP58PpAiAlR13y45dKXewsa//+8EHW9LT67x36s59lUoWQ8h2XJA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.0ba7b095.0_1590807412531_0.12142345585032022"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5eaa9bac.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.5eaa9bac.0","description":"> IMPORTANT: The Material Web Components are a work in progress and subject to > major changes until 1.0 release.","main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1","build":"tsc"},"author":"","license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5eaa9bac.0","@material/mwc-tab":"0.16.0-canary.5eaa9bac.0","@material/mwc-tab-scroller":"0.16.0-canary.5eaa9bac.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"971c5d20ea684615fa18f3c991d77704a2435384","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/971c5d20ea684615fa18f3c991d77704a2435384/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.5eaa9bac.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-IIgTBvNIX/92nHpnB3wAmANloVv7a9mP2HxUkv/2YiyWtj38SHHDWV2SqqooqjT45CVi75lEcYZbjwRr/d28XQ==","shasum":"de87052676e5683ce4da050fd1cb6c7349995510","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.5eaa9bac.0.tgz","fileCount":16,"unpackedSize":54098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Y9QCRA9TVsSAnZWagAAf5IP/3Oz7uNngKfBZkzDHRPt\nUvHR6c+YlCTTm6Hn9hRSur5BJDPPef3u/DxNqEXdZRam4LJ+g6vot4Rof4Vl\nj+D7q02zfPt1djrd0zUQyNb2MnQJnCcHDxAg1mXG+vXc5chO9fCQIW3wlfe4\ngC9p0qeGBFJYONaKhDF3hSTyBHHLnnDFUUDL9rSQLT1jnU9eIKR0DpN82JTR\nNu2jw8tyh8mwIkBSVTIWAp2aBM2DxynmYrHIza4gLYxj19WRFxzWpZZlSW6n\nvPaoR32XphrGa/7Om3D1k3LKjp5sgPq1BbK5dRraJ6BR1r1n0VSu7en7vJtP\nPh2oEZbMUfHXG8Yw0IXIMD7dDVZM6acgfUpOOpXiFpBzIkarxO0chQHWF9E+\nN59ZeQj9cm3Ezej45H1RNoCVNzJEoGUenpMEJERkFCZmsU6zX01BSa3OHI6h\nce0pviwR0igmGpt2DgdMjwo4AomiG9SA1ZIq1qUZeMWQ9/SfWRj0ix613WVq\nwl6wzSFJlW9nfmUZJdWFTv4NgAPg8VIwcsuZJVEZtucwlm13VUYjT3T16KEF\n1LSN4wnyoO9ihn86Hr+aPjOKgGm5nFnoqLvBlCLSQXiDSCiDpj9qzUDDFjA8\n/twVbIOvYu6gqT85dIO5npKszzcV7AgSWsfd+XANxRAv6qzU5oNR8k7B/5me\nbtuj\r\n=OaZ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBGtkebuIFMwqGFN06oukpAYH/EQWcKXX52LzaLWs3LHAiEA8eAkge8dgh5GDdDUcBLA8T3tJkhCw4kKRzxXqJfvqUs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.5eaa9bac.0_1591054159955_0.9823763698809769"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.5677ac20.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.5677ac20.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.5677ac20.0","@material/mwc-tab":"0.16.0-canary.5677ac20.0","@material/mwc-tab-scroller":"0.16.0-canary.5677ac20.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"371e5022a95234955de71585477022efd63b4645","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/371e5022a95234955de71585477022efd63b4645/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.5677ac20.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-pJy36wBgUbnmA5caTVv/pqSJJIP01pAqzMgiEpusEDllRAH/DDo/Ol92JVda8dDkApmaNtEP4MnrkJSeH0rHWA==","shasum":"eaf6990d6446497bd9f5eaa7f5d0dbbf37249104","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.5677ac20.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZYOCRA9TVsSAnZWagAANLAP/0Biskc5nKnP8F660zkF\n1iuv7Uq8TqJ4DE28XVxPJPpZPUKZSxG/72FwC/rUOUwdTfvfS3VdLH1yfeZO\naQ8c1YsstZ3tkoxkd6VEI62h43zHY8/FBggpDQ1CPnchExrAYP5qWWc7a4zt\n0PMJs2aBuXYUYpmIK1Ve5v8ExiNlZpcOt4554WHIwEgBO3RByXxiAI4c4y1x\nYrNokPS/RU+1cD4KfmA0lUOU6YM7IYv1axRnlI0yx3r6cPCeBshkqqpQ3F54\nPpe3Mpd3ZQrz4tz2PWNWdMBdrTXNjrq7wzmbAWf7zia6sj9T8GkekjWELdQF\n+6n+GpmycdDZYPzQUNCa3w4pk+uf8ruJP1GShB7xXWG2Rc9O8G4cN7Me4VBu\nWgEfQ5z+8YUiLbAUs4pWsW/OA9+2wcDkl5fmINhsIM80jPc5KW1JHdBvP/0V\nZfiL66T6TuSSkEHjTbEX2uEcoe/etouh5AI4Fbv+7SztQa2an/TjBU0cNr4Y\nc80nJuYLSrYdwQBx+gGBs3PvRuOV1fBbaD6YMrDRocXsrEkdipVPprbHmWh8\nTj/b7axGLOojkr6Jl908plskpGZ/rIzwzsTLKss0GyF/EMjaqI9NOcH2GbQU\nuKGg7wdDe2SB3zNX39OfNGkzyOuia4hL0gz/LPBTx3srybpDroJz1M1TKxvn\nzkHB\r\n=HgrJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHHmn3PNu/MjxajOlFz9oqZz5iEvOsQZLwwcCUVUGXSnAiEA7ARUtpkKhNOIos+RMtBeS/Wy8bscswYZ+JMTNwuRK6U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.5677ac20.0_1591055886023_0.9252918952527964"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.7ac6bff4.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.7ac6bff4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.7ac6bff4.0","@material/mwc-tab":"0.16.0-canary.7ac6bff4.0","@material/mwc-tab-scroller":"0.16.0-canary.7ac6bff4.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"393ff5005fafa04ca276d60639975d8bbe851f70","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/393ff5005fafa04ca276d60639975d8bbe851f70/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.7ac6bff4.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-80ek7/z6LLeKyXBbMfPZkvFqAhxi8Qt4/S0QObakeQ5xqohQ8PtrLT56ZfXkS74x2H4c0gDJ098P4XsrrnUmOA==","shasum":"5bbd88c9680aa19abbc557bab3e141539dde7342","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.7ac6bff4.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1ZpECRA9TVsSAnZWagAA6M8P/2vBo4xTxvnDbomlvsHR\nGOzZgSaqYGCWvEykj/gTRTbEvPRX6btxzIiXUZ169uQyEhVXcDjl+k3ecQKw\nD5cDvjcIbB2f8GSTwEpCiGBlFbOruNsXmqeLksF19Lj6cNF9RzDAsQgwxnKB\nMlTLa6/2TMNfCWTSTSPc/wtYvIlEDrew5pzCKcj3SAVN+ipcECvDIsv4lYtT\nXoUO5IKi/yKF18CS/muOCPPvUKRGbQ5/0ufBKUB9pCvFePAnGtOyQaTpKBCH\n067B7CSFT7JYz3g0QtQiR2j8owM3p3Jq9wdFpdHZfwfJNP1s4HKuJHynRrI6\n9fUcxVC3F7lBSMy6vOVV6GW9pF0cFr0BDFyZYQHQrGKdhoKnSMcOvyzWxhK9\nyPEJ4YRc/wEr1CzfrANRbpyP7ioqLsS6HozekO4a3RDZRHATbDz/WG2rmIJd\n82+F4qECTWuqnssfyHYKWq3hSJrbWqv8EtJoHokc3kmSOU+bcpDFxmCvg8Dk\naXIsIRAx6rslhOi3ysSNu6HSAaoJApTctl+L0q+XMwd6uEScq8W3patV2fVL\nBvGIBBYdPd6C4cowpj6ub4LRoFvQg43aSVy0mowgE71PRoL+HERrvmaqG3Ql\ncJJ52sfOHjdTF5q2m9PbRJ7OH8/lO2enXR/ZUb3FS/5+xM5ohTdiMp56CJs9\nrNQm\r\n=mi90\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpMj1QIdZ7dhAVtFUc8Jb/aUUP5HKuETqTpnBhbI3VywIgVDB99uxYdu29aTcOf785xQHnVUGQFMqNr8qUc9zPA8U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.7ac6bff4.0_1591056963741_0.6462786756175876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d45622aa.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.d45622aa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d45622aa.0","@material/mwc-tab":"0.16.0-canary.d45622aa.0","@material/mwc-tab-scroller":"0.16.0-canary.d45622aa.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ec53ab9a7c87df6783ef1e555aba6d7de86c46eb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec53ab9a7c87df6783ef1e555aba6d7de86c46eb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.d45622aa.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UvdFzuUgK7PBl8BcVXlLuUygiiR8N4LdvZLQhTJbO4G04RgwcfTOHL63Ni8nZA5G8jdscvxWola+DC7ord0qhA==","shasum":"caa67764ae26bccedbed4180586608056130ef70","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.d45622aa.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uTICRA9TVsSAnZWagAA5McP/2f1ty2IFRa1AnZNwnQm\nRuyGCCHZv/dt3JexNbSLBwGNuAdVLlcP8HHR7XLb6P3aReice+2eZtju7Dlk\nobxsMW+WjG76gIpxSPN0sTGfBWOvxlowa3qQ92dEkbI5381nwZqIsgbI24vo\n/1jo3a7qJu5Ab0hS3tM9qra5rHCIQLj7EYTMniAXBgiZy7wE50C5KGAOTNSA\nXLpilUles7gviHF8WJ7NESEF58/b96x8sX9a232Z2f8pLKaMgPxLe24OQgti\nY0S1MXzPCk7DCgeDtWfm89Ta6xkv2HqkV34j6EviatdyWFR7RWvr+YU6GEPA\nRA4H+G+wbviIo7lLVikM3Lqa1Rjy0+ZsxB7P8QxppU3V2P/mAmT7TD59lFIo\n0pmvQzqiGFOHqbVAWZh1lCznOWOhlPjtON1djqADpYH6ENKpadDvmztJW60P\nrXuPHolY2TFqmvrfkoD5l7uy1mc6cLWM+mhVw3WB55tKYyV/1bOq29KYPEP2\nQPp4JLwNrneKninUfAQQ7Bs78Uo6XL3uZBFteLhyE83MsSigSxqCry6rM4nW\nw0q8ueekIEK/PMmguv/VvVKcLV5cCJH3/TAuCHy33Jv4IZrqyRTGWpiwwXf9\nhMniEBrHThi/VVtRoTrm3Pg0yOfM0MIiscwN2G3AKa8spNFye59G4vj5yHiH\nYUz4\r\n=uxvr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFY3/placlP0BizYMXwJAQwDTH74O7hLiZItyy00H+7gIhANsTS7K1AyE3NIdT6rXjO8k1OSopiBIGGLMKAQV8OXlP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.d45622aa.0_1591141575965_0.6624210642538382"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.dc26c709.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.dc26c709.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.dc26c709.0","@material/mwc-tab":"0.16.0-canary.dc26c709.0","@material/mwc-tab-scroller":"0.16.0-canary.dc26c709.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"58a25b562ae31e6c32c67599f842dc6bd1f86398","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/58a25b562ae31e6c32c67599f842dc6bd1f86398/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.dc26c709.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-ICjx3eGGuGfcxdfBcsipr8hO5U9HTOCc5fphmtDfa6voImvI4Q/QIwPM64cXlPglWSRElZTOM1PEH7WXIxPfew==","shasum":"e33dda4e16af10a5972fd6aec0695d07e2e11ccd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.dc26c709.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qlCCRA9TVsSAnZWagAAo7YP/j6UOUHSmfK7RHhDjZR+\nQT6MxgQ1pFB3or2ytrkhPOgTHalymC6FhVG3fNI3OGFdwFuqql/o6xnFdsj5\nYtgTmJlpdElPhnIP42PPWYZ9O+ZqJLZXJMKGYI+CuUBf5hKMbAM7ENoA07QV\nLYY2mdbMC42Y/6diPICOIy5M/x3SG3v4swrRCMPJjuLmxiR70+tdEAv+Y5UU\nSIHpeBrsbJhNAoVoSiGkFp7BAqHi2wmykc8Lb/6HfbNWI/NXcnH4HwUgGR8N\nIs8FMulYmijMIEVZKs4i5x2SYGCpb9vXeufsSVKuSi9aHttFprjvmE0Au3AQ\npAr+MVjjjM3Oy5zzu+1KY4OTPY0MjsHG26gAoG0LvUeADSP7YfinI5acnpqX\nulQ+P7HDV6bcwxWkays1vXbF1HP3zUk0V/Jh1Tc9vchAOwdNkrezzgK9LbUH\nUd3qPtoS0KkmhT/ghhZQVoK1PIlMDXKON0dK2iHYnHM0htIheVpWFIqn03+N\nInqNXqPZ2pdHdGBncZkszuDhPmj1dC6CQlM9LGpplwsdKRt1lF1MHgxtA3jY\nBhPvVvq3rAjMSkxSNL58zOC5rnSNNrxOS3UPEqecew0SKRmOKpMnen7YZv+u\na+v96LRDX4u7VH4vCFE3fhBwqyqc1d4Ikr10Cbm5oNY85TsrIeK+fmb3Of70\nA9Sp\r\n=Jg5+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDxE6cyGJncRpfzfKynlyI3t+LQ1YGzP+sWKlzEKyAXMAiEAl9KsTnqClshhhwDa+bU3uq96t05wk0F5ktPatHThIYU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.dc26c709.0_1591388482079_0.11502506420435443"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9baf6db.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.b9baf6db.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9baf6db.0","@material/mwc-tab":"0.16.0-canary.b9baf6db.0","@material/mwc-tab-scroller":"0.16.0-canary.b9baf6db.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"911d44443a75be4f249c595f2fb8a90e42365c6b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/911d44443a75be4f249c595f2fb8a90e42365c6b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.b9baf6db.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-g80aCrhCeP8k7Rl5KDY8EH2U7qY2BJxLA6nGx3BWuwjC+Abua9cYW+bQglp9sGodfJHaIKdzAwJ4wLZwtn0HfA==","shasum":"bf303a2887300b4a3d16c6fe212865c670a0c15e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.b9baf6db.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2qmWCRA9TVsSAnZWagAAlvYQAInly1jNSuYGW0IFtbfP\nJfIzlbwuUksCn5m1okTSjsBo8KKEHWirnJVnlsW7p1fobwpiqmbdBTInHEiz\nlUj/pYOQz3MbTONxl5JANqGkgNtPQODDeNOktUd/Ra+wcRuw4EXFNOY9CZxx\nR/vsiZybpaqOx50RFbWaC0n6ybvuf8Fg+jLJ88kGDqVek7eJ8AvGVbws8dLw\n2DHCBEKQ97PT0G5i+RTgoV4/WvXWFNYoTPwUeLt07GLyd6eaLmG+OEwPixmV\nCohaorzjUo2CSJGnJA7BwKuPAITvSGz0VXYiSRfdSpMUMHZr7BTWtCc1/bQU\neR2Fwtlk3IdRS6SHDnoNDeb063/4c4ib4PFr3aaWK3/fvgS92kApvsMKsWhc\nAtdZhzB03vRUX33tuwiG7GXNWbrkYghxRSgJpbE6w+npN4GOYZsO3uN1t0ns\nBv5RTzFDV06gvF9nUczA28hZYSsFUL5DjYLhlojQC5nLmMExZIz98hfaWGMh\nYlq9LESJ0c51XWFfCSiMR1g8Lw3qPlYH5s8ldrdEVUNr37s3kGpzPdo4QmRQ\nAN8stO8S/gL1Do6iTNu/c0bYKzGcQKrvIXeD8CHPUkz0KUUyl3oknudDhDJ4\nXL1Ct7AOg81kBMYDEu5Jam6SUUrEyPyKPeNjl9zUXLJV3MduL5cfA61qr1d5\nzTIW\r\n=g9Ke\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJZPBTaHX+2DYvIqpn9VjZmSrqFvUMVGCpgPbaffOKNAIgMIEc45Iz6RjkuoBtHe3C6pIDGWPXchrVtq1ATnGbc8k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.b9baf6db.0_1591388565860_0.9584696338848508"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e0b8c9d0.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.e0b8c9d0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e0b8c9d0.0","@material/mwc-tab":"0.16.0-canary.e0b8c9d0.0","@material/mwc-tab-scroller":"0.16.0-canary.e0b8c9d0.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8067f7c0024a048e98d327efa458b70ed21da6e5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8067f7c0024a048e98d327efa458b70ed21da6e5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.e0b8c9d0.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-RoZ+/U9Iw+MtLuCwXzK6DcsAbAuGGwwA85o12IoKuT/0zwyHU+UUkQBYXIMym5+w8k7rj2ZQKmt7LVvFDxdxlg==","shasum":"25a99707bc964c3668a9c554f9bfe8fde5208f63","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.e0b8c9d0.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2s+tCRA9TVsSAnZWagAAuEIP/i0baV1PyFOSdBptVoHv\nUX5VuXipfpZMxJt7f7+UjhrXMMj/cDSiLCVzJJzKP5pZiflTp3ouChiO0ieD\nGD4LKm0ne9KjnvLlEkeAvJB+kfoDdOFwXuheVEnxtO8bG8YAUE1+TQEtuk5E\n8oe9Ck4b21P8QgK+3MB9o81DlnjvVtYuiyNWpzZbxkoLpRFGp1mqxrxJZ7j5\n9r/ci006sh0Qd6l5VW0jnxroYXxdSKv8KUU1gMcKZIo8rMUJQPnIFUQ6Ix1k\n9jqr6OGKspZDsvai71z+1h4OShRpHWxIlPF3FFhszNm0ntk10QNW0sQ7AMCA\nPH/VFpnRV0P3s3mKrCQ+UlrbxjKe5zL7UtTnPj+tOwjak0eITlF7iiKzD92U\ng54MVudf2d59e8x28HJsIvPcceDv7Be434X5OHVUNxQrVJwtlaLijFw3hhGs\noJkXDXcfPQ80ig3kmEXQjfl8rhjkHhlTaSQYgzsiblajS4xegRCvvmiWYKqL\niCTbT90qn/e4hzAs3q49B7jGr4wWmXCnlszxvNDSgTQ/I/57mZSTB+7dtjIb\n+T4Y1NITWJLxO/aumZjDoE/VPJckZ+8L2mYE+2eQDbCgqQ257CpR7z5aPnwc\nrXUElHT2VuIZH/y/kMEi05fE7cTQTMaC1mox6gI2pQ3DtB4qO4KLmXphn5DE\nfvGk\r\n=xcC0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC7NEogfOhFQfI6s5WgeVTbKuWoFbBI04FnWg7skqSBZAIhAJ0fhZ6Fc+imNb7XCLnQDaWnPcj94O/+vfXUq/cJ8pdI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.e0b8c9d0.0_1591398317287_0.7651840223567083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.51552859.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.51552859.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.51552859.0","@material/mwc-tab":"0.16.0-canary.51552859.0","@material/mwc-tab-scroller":"0.16.0-canary.51552859.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"be62282108625892e385a5b64edabb5c9949ca75","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be62282108625892e385a5b64edabb5c9949ca75/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.51552859.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-UkfSd9BWYzK5nsdFZRmK0+HzGP6sw88GWYjuj3P9c7pG4xhJSYiU402WdLgtVk5qbIeG0Rt7sYQiZ/kg75n7Qg==","shasum":"641b305849fb6b8c63dccd990a18117e1d739c0f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.51552859.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4CSDCRA9TVsSAnZWagAAKnoP/1upAAJAMgX0n43AssHJ\nqCuKUhWRfAAvltJwHviqYO872kX8O7un7+LYaC5xSznVfOvRx882XfWNxI9S\nyJsBRctYabswglpDzJxHpfaSSJHxI/wnlKOLCsS96HVuldTjYK7qLuSQxoHO\nUKRsJ7KLrzXoIej75ZpZKb+Hh3bGZ34ahxG6pb5MnwOP25wR+nlE9AthWLcT\nRn0qv7hoYKLV740iSXFr/VaLtDqbtp6t6ikjZKPmbMcVQmrAquL9bGs7OJN4\nFu2PP+HHWMg0nZEctmlmmmngDFI15Z1x8jotmZeNa+QU4/pv3L4ioSxapZJs\nI/rCTGSHDaBnPVPURCEgUlcd6WdZ2lXjZvJthxM/02IbYC0afKMsvw1dLwoe\nWSSLq7K5F4K08CCVIZN66g/EfHwF4XxbQQDFl577bKyJYUSFvqR8l6QBz5WI\n0nqcCJYV+Vo6elDTTI1S8ucv5KNRo2id2ekIoGsCFXtkCEZujs6xSvMJ2TWc\nHKmSijXpXyi1URw2jHrqeK5wX6wCbKezTA8EUVBn16Yr7smmsEL/AQ2Y/Vxy\nZLmmrqEwURfQd2U7T8zk1YjiB54fnDI9rA2q/Zzeino35tFbgLa3bTUOnd4A\nQHmxBMkGAWgjz+bJju6iwnIMrF4bMM+qojDwEdslepAzD8vuegRrLH9lgNwv\ndrIa\r\n=5T9x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCAhWyj8VK853yqUXdXLzootDGGf0EfDm7GNPMV8sgsTAIgO81O97Ya0zZcfy2WJ9/uJDlQXmwgnRUzEISuMBM9XoI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.51552859.0_1591747715507_0.021206172091851494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.2e269285.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.2e269285.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.2e269285.0","@material/mwc-tab":"0.16.0-canary.2e269285.0","@material/mwc-tab-scroller":"0.16.0-canary.2e269285.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"de64737d606dbb8ab6368d8fa30690e62fa24cb0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de64737d606dbb8ab6368d8fa30690e62fa24cb0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.2e269285.0","_nodeVersion":"10.20.1","_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","dist":{"integrity":"sha512-h0PS6z9HyClsu5FM/LgQYUjbdWHreXaVI+K7Iq3TIEf+LJu1bpIqoSqW1YCg/JAMwZb5wqStF3XvGSl0qskdvQ==","shasum":"800f24c5f8adb725d8ec6b6077e92bc7cb372d47","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.2e269285.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4DkGCRA9TVsSAnZWagAAgLgQAIjk1wVAT41y41txXpPL\n0olJky62PAF84S4xiVmcx0Qn3+U/dX9UTKjbOxaU5eO2BXECbWEs9+3+1u31\nHnJeqC4KJk0RyF0GQNWDA/BP7zJfswg3rmG1yXXh2htioH+kjwAczfPezQ/q\n224LYYa1pd31w0RhTBTrJTB1Uv3xwkksr+o0T5xvtQGBEur5Q7in+4TNX+cK\ntQwDEce1q/qdQGSsQ8z8qjB4Cax1l3zMqKlA3BjxDyaVyOHm/VaDOsXETt2C\n1pz1COhla1d6I3kAiUStQbHFVvhil4PnbMKzcF632vhRRYEeDgW6Y+MpHL3W\nVb9N8cJsGYV2I5EEGvfBeGPZoLlSA+LyV7dHqKq4yzp7XDCmJWqFzHFeK0/y\nav1NV4vP0O9RI1q4hyIDcJ/mKMCxLRUbC/togbd75K9J9nS+qXjdT8JLZ0Ma\nJpSvkIXISgFiRxH3pDUD4xufx1q2bVZAGFeGuwS9fV8wETfbCBlILtddMbpf\nA3uQdk6FrRarr9yaE0f/ndxpiumyec3lz4HEdCcelibhbyU01zTdEVq0Gd7e\nBuuDe+vmYKzCKAk7/d+8Z93KLRw7ZWhsGGfNHF6PZzh+rNAkCIVPykV4I2/M\nnHDD0z5HpszhKvDqV13yGjIYFKlitbRpdCRX6I0Kq/1XqnZP3PEeWOO8TcMM\n5vIC\r\n=dinu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDCrk0IioMUCy7bAsTTfNZLCGWudJgk7Jws76k690AudQIhALdGOEMbE7iBlwizZX4HWB3X8kAUqCLNebqFiIC/TCGr"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.2e269285.0_1591752966108_0.5539837071179445"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.be138b01.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.be138b01.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.be138b01.0","@material/mwc-tab":"0.16.0-canary.be138b01.0","@material/mwc-tab-scroller":"0.16.0-canary.be138b01.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"cd3bec5fb787616d9ec3c5e011ed8224add04ad2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3bec5fb787616d9ec3c5e011ed8224add04ad2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.be138b01.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7n5NwDQB32iPPXlSE3T39SUBoWUY9RUdaezvgUkfvwU8gXWU/1BEwn0z7BHsHLBR44t25m7HwG3TW96zHamHgw==","shasum":"258401bac46db22df64b415df1273afc6a4e2e96","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.be138b01.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4UdfCRA9TVsSAnZWagAANL0P/1NUjcUNytetVDpEZH17\n5yEkDIIkSa8J+SI5vbZqdiMO39fZVPkkFBdCI8JQ9FiE2ZVh7gZddJeUspUU\n7b3AcqSyFezdhR1dj/LpyUksWMXsWJPAO9njCiSOQ0zi2HaMOWgwui5wBBCb\nSAPdFeOh09XlO/rsL5zMzju+IdkPSlvljlUtlAEKy84da6coRWKVPBGWKSEt\nYisvqXLBDEAUezpYqb9rDjjLfRa6tv9zftGwFY34UCsO3N8u1RhMH7U5cPlb\nFlser4wqkD3F+y5+ju9EBqQDC/eW+jm6bgMajJ5HHebd/BnAxdHzGALMb2rT\nPcYxhbz0FOyUA5pw0BeaERlmGIG8rRMwHAn66hJb9AyIiLdgw228WuQPeeyS\nEgbX1i7pCjj42AgT+5zf+qjIoAPMPdx3HT+0KYWV3YKY8WTJIxj175ifYbCE\nKl3y1+K/uz86PbKFGSodRsbSN4vd2pgeGoFNhULbtj3cpsWEW3RZBjiJi5NZ\nRcmy52hVfOhtLOIAQAsgXGC2LKiclLkc7/rYX3bVZ72K2NjIlmbFkake0NIz\nxqheVMkXi9cnjiVQYQ7mDIPFmKmb4ezgfgMGlSXhoZ/4b7DmqyQebPKktO77\n6fLicRN9aAhZduxdFaQO4WCXCqv2J+rQP0i/pCp3kFmcwabr+5CdPNBVptfp\njZz7\r\n=bQUb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDe7fp1B7e1d+5UBi3lVkRN4ka7TQYrg8JTpMHbI3pHNAIhAJHtGZEIdRdGe+F3+5ARVEeffMuk5cJXikbhlHqIwyS0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.be138b01.0_1591822175018_0.32373382481425383"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.04bccf5a.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.04bccf5a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.04bccf5a.0","@material/mwc-tab":"0.16.0-canary.04bccf5a.0","@material/mwc-tab-scroller":"0.16.0-canary.04bccf5a.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c077c9c7d3e6ab509f750f7ecab7ee8a858e7d22/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.04bccf5a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-keo525OW3BNilOGQbtRnr7WRCYbjRmdg0XeTEjmDGJdt628AyYiFg2V9zng4ODpd1BDCw+52ygtZDZFh0bhlUg==","shasum":"25ed63e46f92512c8f52d28e48a511b9fc38b730","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.04bccf5a.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6BluCRA9TVsSAnZWagAAMCAQAJA8JucJg7cBgSiSVQEW\n52L/xbMehMEp/zcDnsojv0qsRYEDbQrK/NJ3uhBpYrLgfE5xsxwJESEG2IMU\nROiKfQnTKIPHuKoDVBelMxqgv8K7eVNdvrb9LGS4oOXwZZ90YHhsLcyjo1qv\nDiOR6Bs815Xx7HzTLJG1qrLzqPpgpBFJcLaobrSnG4dAnCow5iseHmq58qDm\n6Ww/MsbYmf0klWCx5I9oC1QCjFBkwqrJyI/8Ih2E5TjV2LKxQKU1ljwT3885\noSUROoMmLvrlSbPULVvGraApt7kcaxlW9BhmWQfewaLKv9QdHaJHtN5NLaK4\ns2jD0VvpKMIuuixIB0sGaEbIG4BHbHnDRG7qyhy8uUYnJW2VYRLkUyGvtunK\na/v7NY3uxBOdCg7R2242Ac1NfNxS1J/iMG2w9nqHadtemiI0NIF9i6oCeUKf\nLkj02R1v2lcGpeSCcra8xJOkaEIMLBWeuLBf+C6T3Cnmgdspy8wEnGaZenXj\nVwtatZZ2aHE5ELZAZaX2IItk1yApFJ/pQAfN/IoshIMlmKVRt80MlMCnnHj9\nSPzVjMImR+4L+PZE5437FOsy1mVUGE1uNA6IYm0LhjRQF8CYsmmTiJHyVhES\ncEnyT07TaQNUBsB+cr+gTonGLgjJE3KrUwjSf5BvPGXWP/aFMkXuVWJ9ey/4\nYoDP\r\n=v7rg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG3YFl3eJXijj3cJuxB1QPM2QfuEQHW8aJYlkXK8R1mAAiEAw5WS6RqbpzBv4l4XPiQzro/bVSTh0H8Z+6OxiotiDKA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.04bccf5a.0_1592269166170_0.7194355258612735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b44dea36.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.b44dea36.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b44dea36.0","@material/mwc-tab":"0.16.0-canary.b44dea36.0","@material/mwc-tab-scroller":"0.16.0-canary.b44dea36.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c3acae783f88caaa2b0db088b82e7b98ef4ecd95","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3acae783f88caaa2b0db088b82e7b98ef4ecd95/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.b44dea36.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-wN2unA5a7jl9hVvKPST/QILleIx+e0AkEM21hEQV2knJHvOUCtvekT/So3DOqrX6kNwn+yDmNaik3kt51FgqQg==","shasum":"8c86a5dd0f42ca9a80599c9bc7aefa85a4f72a75","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.b44dea36.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TJpCRA9TVsSAnZWagAA7RcP+wQsV8PO3262qMr8xWN/\nQh/h+DukQVWZ0m2uo1IMeEcE9uj0e+y70jO1VNeOjFwOz6ir4Bzcx59Rhslu\nsm6G8mD3Y2RD8GAH8DrliTsf1YqTP0gdhDq4GmFAoEhrOirAp7yEKLJ7L9TU\nXoo+JxI4l10HFZjUN/CEi5YWqyBIPsjukcwjJaCMIaixgG1e7zDIxAYAo+hF\nmDvAbMbXf8pkbHHxrg1XSxtw5+KIPMpqsTxVsrVdpGNU/U9s7OSYPxd6v5eO\nX6wOK2szbRMKJjuohEts4El0lRJyD6GjUjZbiFHefiEhOi8kxzLGOQUOagZx\nvKu/grnK4NYSsEbMCcTgAvdYEUGeEkQ+ocQSwcHEVgJTtu+ruBD4QTWhbvqS\nsPu59Gu+QX1wcoXH77t2c9+U8XGqE6ewT1+NbFfytVx2x3BM5U/1lr8YuHDR\nw9Odpz8xp96cWescBP6LN2r1puNU3Xmg/5NUeilZoZXuW/4e6pwcCSBQ3Om1\nmO0CAbyw0pGsP2Q4dImI0MFUn/ggG9WTDCH/jmWWdGgVEOyCTvk6ZYlmA9Se\n/SM281iYAs5rjtw8lc8bwfbmeXDNKqzu4ikAuS15k+wOrRTsEZilUv9MWlqf\n2aYHgfevKRpJ1R5KXwLitIdlEwqBfa8+Kh4fQVDZ0iKYjctd/d67X4T2F88r\nDHug\r\n=AJXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD1cwljlM7sJFKS0nQIbNeEeF93t7bk2nPokc19IOhOvAIhAK43dX4RsbJICuRy87SkBoTR8YbMbteGai9a2cwCM5/0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.b44dea36.0_1592341096758_0.4460913379158593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e2577e87.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.e2577e87.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e2577e87.0","@material/mwc-tab":"0.16.0-canary.e2577e87.0","@material/mwc-tab-scroller":"0.16.0-canary.e2577e87.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cddb26ad140f9a5ae7e41d4f66258da9ffadc5f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.e2577e87.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-90BOooySY5L3B/WLP5ZN9PFZDp+uTP98FITyaf3kKfcG4BbfyK5yaaYwnAcNtClvIyXZXJp0A9n5E75VioONaw==","shasum":"3a0a45ee324d2685f7f75c3fc94924831e0bf2e8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.e2577e87.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6TTtCRA9TVsSAnZWagAA36UP/2Za64/1RszqDcFphTKy\n19o8sjjVfMuE1N4sga7RLJozSOj2Nq3VdniuyY75ueUBGDcllz6uJeHKuH5f\nFBAB8GhvS1cyMgmAfTmT8OpoDo5GYvfU1NJ2jwx+XHgBNIXZ4669mm9d8Kc0\nDVXZ6qKq4Q9tbftzOLNTrCtqOVYFlCyI8Tz8jZKJHzsArdU9trHj4ULG2ZVm\nYfy/d5pHRvFxa4xi/+KeDeblFb2VrlZd8u2WZ0nNmhHZx9hKun4A79wddf7u\nNskrGhsAm+r2QLwd0yoc8DymeJt/xtDgQwpVBA81/2dZlEuZ1UbxxXCc/t0W\nRDBlTgDQxKfjnhl0JnAr0jo2ut641Fnt5KGV+eQH1pR6/JISe56lDBuwt+j5\nGKTiJ2TB95Y+piFmc+Tdrh3NXOT2enRAUQgGCmXnlndTSrse6qcA26VmoL3g\n2rErSXdHhcEtd6OfqEYwofY5j7bL9R06LdAtgkXazqxa3Wk6NH3WTm1cYR8c\npVMQriLo+iBejEoXJKt//6cfvgXulOelb3u9LGjfzkcQ2JXjtLwZFC4YnpFm\no6t4dhGLW4TXMegJop2DMWiXsq1gkVlJFpdV4ZcdBqXZW3x2bhdva4HI2E16\nv8SxJ13if4Lbe8Bt9LttGZL2fjWmzehgZe+WbddlpVqUsGgj+Ji8PS7LGRkn\nPrLr\r\n=Q/R9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc+48ibOCjyyHl2VELkFn4ojVv0cidTKguxuc7tYLnbwIhAJuf3DIhlKm6yyjNOOnJJv98aGoOYWOT8i/kyAAh3l9K"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.e2577e87.0_1592341741485_0.48546644892075186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.58b73343.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.58b73343.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.58b73343.0","@material/mwc-tab":"0.16.0-canary.58b73343.0","@material/mwc-tab-scroller":"0.16.0-canary.58b73343.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ba9eb85b43f514dcacb8e7517e4b8728a3629bef","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba9eb85b43f514dcacb8e7517e4b8728a3629bef/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.58b73343.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EgaSNJXe2C97uWJfNZwq1aljp2UXqcJKo17BQo39pmOw8XqOS6r0sSlirGGcHu3spgcQdAfswaxyI4kA+BgMnA==","shasum":"637f9fc20623e3184d030480118a6cbad37b81e4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.58b73343.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Th0CRA9TVsSAnZWagAAPNwP/1xNiej+wkymP0iaF9tA\nV6Nmx5SrTB0IslBaB4/bcdMsmIAZI6OaXghLtzO1SI81WKTQ0j3aXhdbWEPH\niBRdwApoZ3dP7TSC4SvJ2VpqfgMokGxT5re3P+4zVpfAo0u8xgrfDbh/Wgu2\nMmMHgig4CriBL7Fce/p6k9d1eMnSCEiJHsezr8D9GkNszcvGm8xGGqK8fTI0\nEpvPRvzcDY+Z/t4ZKaXlwUefNc/Gq+Avi3VXm/q/JQGBBGLqxg51vmScntBB\nfGqfsGCtlr/k0lb/ohVWPsOWHqZQqDDYP/O7MGZXVFir4XRLqor8HeD1xqJF\nclDim8ofgSlfNHzLKOdHFMYzixZrFqzdG4e6ZQuE9BKoVfojYaZT9XShhF12\nfZmYiNy/2DNuxzqgw7MUp5sVI/d84eoFBlA6qXrD4aIBT9kTjNlNFJHtxOP1\n83+UvKiALxNNvd7F6IPnrilUpGzQhMf8I5K2kzxkxI6NqgniGgYv34dkKuyO\n2Gr5a6gnx7VNNKkSnbZvswu1169q4BACZGAK3vn3WIvMkEfSuEzx16vomcAw\n26gEN6BvNbWKLJbr5IHnZwjdJGqj2CpnzjMzlCr8a1bNQQ4ZYKsqdWMjn9lw\neZnAm6mVzHFGpAhaH4iPhjw4w3KZC8IBQ+6ZNXB5OOmeC0XYC7q41/C1vege\nBeX7\r\n=6VVl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC5CIWI8GVYTgMs6YO7ZagrVhHbJpPi4Z+h2hHPwtZ0EAiEAiUnAJvO89WNdGTySMeEULD/tdGbt5BWEV98xd21m2Ys="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.58b73343.0_1592342643735_0.48766112517600124"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.f155c058.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.f155c058.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.f155c058.0","@material/mwc-tab":"0.16.0-canary.f155c058.0","@material/mwc-tab-scroller":"0.16.0-canary.f155c058.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bfa2e71d76745185343aad4d0a9a2b6c3b134563","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bfa2e71d76745185343aad4d0a9a2b6c3b134563/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.f155c058.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-W3/J9SjvKGzx2IAIU8Eb0s2bx/WdK58Ar3DHSqdFh1BC8qzDsFX1IfFmCvTcU7uTTFb+BXjfK/gF3vg3NV0r4w==","shasum":"184e2a7bdc051ad8f1c13a992e020445d3cbdfc5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.f155c058.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe662MCRA9TVsSAnZWagAAslsP/1SOO/Dn7n8W3VYaiBZd\nPAAmiZnOCVrHvBRpfuONXuPK8NvwWePNxcbOIVv3tkREuualWAu5VPqPzd5k\nKL5ajep8tS9Xwp9t+wKJK0xYn+KX89v4NUKzvJeUq08zUk9zgVMJ/0oVW6ap\nShze2figcC9CXjvWlg+uCOm9G99gORmPSY9GVAk5LXy7cgzIG94jZk/G2ne7\n3L44VQZId8Ls2hCFxqtk0+CW+V2opZbAqLp9F7lG1oQukobaLa5mLy6UHbLt\n5e3SvvthV/bPK/qBmKEBkA/Fh3ltL4E7BjZr9UkQVDpoVXPWj+RikkpJ3K+H\n7iA1HLS5mH4u2UeUobgUC5TLfoi/pj8B+1N9EhQL4qEXzlXsO8J7c63CFtpc\nG8bvtJdrtXsMTX7aEnFmNQYeuhI6v/Rn1fCeqjbaiN1GUt04SrDDtfepr1Kt\nY9U7cXNa2iyvyUnL+qnAFMqdZcwbyExjXMJEmPFu9P4yEz84IhZnHGoRs7+L\nl3tFt0a7O2StLeZbd81j/CP7IQhPRyAs37JLbfKvyu49ycYdCr0tBLNj7ZUV\nESojviG71xuKsRn5mynSPwRvUcfhPYArqw57hrMP9SPCUOEWlt0rRpgQr94y\nVD2tMs/U/hAOVDFCBXu5OlksDEHFLG21py/nMXitatf6FDVPU+62N4EtIIV5\nPSfJ\r\n=UnCA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOpXigb7t2Egjl3DbfKqCTemI9+ZivJUMem92AuIOkMgIhAMnSGl44sq6rHFEhwpmq1L0ZAXhuzkD11meFMHLCUp71"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.f155c058.0_1592503691883_0.5122944602749855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.309779d2.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.309779d2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.309779d2.0","@material/mwc-tab":"0.16.0-canary.309779d2.0","@material/mwc-tab-scroller":"0.16.0-canary.309779d2.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"5227f0923971be3709c93d0a8ec0d85564fb31fb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5227f0923971be3709c93d0a8ec0d85564fb31fb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.309779d2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZkY0l4dxJ1bbwpfVSnwJgXFFZ4wiKcCQ5Ct2XFuOYz4a1Cu7+zUJRPM3zpyFaBRGgBTIysrd4HVCUNNUMjDeNA==","shasum":"6b39c7450be826cacc146a95fe67023936514c3e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.309779d2.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6//FCRA9TVsSAnZWagAA014P/1eO0fch8z7HErOBWVuT\n6RjT/0/S6GPZUBIeSIgrO7fB83yx4qRPklK8lTaJ+a9403rQQk1JBPYLQVHF\nllyGZbtJE8waNQDkqB7AlY1JvgHdAxBxPTVbA8lcXBNznyUONbp0njfaN1LU\nijYOKzB+N+ekPfnZOyWQOMCpPWdGLxb9KUpXUV1z+KbbBuGxqpcMbdQ6+rxu\nAncV0MA8T21RKhYM0xiAOulx0AX7ugeCyEN//gRFRSp5wooEKNL0uG7qEzVe\nDzseZIUnHfHSlsu5BB5p1HNhXCZyZgDh8qjqWbFvB+LtMhdUlFwgx5GNyjBA\np/ORw+AR196bjjCDLEJHNtKn1OnFBAJ/qbC6g/qJ/sLCe3fXznAOtUMcX6Jj\n5lzkn/llqCO5C8FhgeaffhCuwvjhqvOpbBLoRj6se3bckwx179wf3k0yZ+QP\nqzZkUwDH0Ihtf0DbaFbHP2qjHyXvlmNmrXGAE9sFZ0BlBRdDI5hzaqmWs8o/\n08o0LJzvA0J7ZBbfuBwhQ/JuhIgHSykNJ4oW4fP3/PxFU8P02p4TxsNy3HLG\n6mkaOOYnZp3UuxiZ3L8tzO4Q/m8ghWjPrb2s1OOCauvDgtI0DcU8AFrU4QYo\nSDX85OQcoHUFHYMVGLxUcchDhd6p1658Kbh2wQTVkZnYFUbSDZ9VMtu1wBPc\nm7w0\r\n=SIzW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH4EpDGtRcnzr/XUHnQXYBQ/9ECfi81z4xSg73SqxWkIAiAexNSmsNF8XbH8uninedvExjzsxzKWrloPUcLrNCXWFA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.309779d2.0_1592524741035_0.5900255296832366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.e7649968.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.e7649968.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.e7649968.0","@material/mwc-tab":"0.16.0-canary.e7649968.0","@material/mwc-tab-scroller":"0.16.0-canary.e7649968.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33e44f7015ad267b659c9bf1d34799ab8d508993","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33e44f7015ad267b659c9bf1d34799ab8d508993/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.e7649968.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nzlKEoLnQyaDFapoR0mV8LFuhBrHFiKke3b/ngV7y2/IT0N8d8A7QdDBk2iGPkr7GAkKuh3iQLR3aLTX0lHmIw==","shasum":"0a05aacc96edf77fc1e48c2d6ca90f0bcb1e3bf1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.e7649968.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7TDxCRA9TVsSAnZWagAAmR8P/R+U31F16B5cbPCN3jGV\nhYTBJ6Q7DUH99avVwl7XTehlWrrcqKxtTYSZo5b7BUXze0pK3Ay9gGojj3ye\nUeyA2sqrTCV97hylZPtDB07MB8bKJB7molJ3klKFtl/56v+VAdSq+4rRg88b\nFP1uaA+xhl8+YlcAqPex1QWE7Ni3gAWaYRoQAupler9Aow9aCOUXGeLY7yBN\n5trQ0qanbAXzQS506wNaRvkrnLy3htp4X+p+PonUnIXROpi6TN9IeFFcktdq\n12j80DKlwTCLABCOMhb2cDvpeqvMr7ru3p3Guv5ohp0/R13dA1pmPr/BJNnl\ncxT9q80UN5MceM7+EXy3w0rWlrbtCajlkhxe1Sf0m2JOJ3S1WA4Qh6EQ1U/7\nvC5TuEfJGYWuwTeWFrgc5mrGFyEtHMEInQctKEwZ+rYL3V/6Cm+0i3Tyfibu\nVVAZ62KuyA9t7ipNN0ITH46MzV+B+fhiGYJKQPu4FZqCGZTazFWAH9aIS+7E\n+bFsjiaxjCuM+8qjXoepN05AIYqb4ndlu9NClzS5bnY5Wu0RoHB9LEfjd77n\nEopi4fZF5abKASmsuUrgVktU3SRvGBGJK6Q3uiQCXznfbOl84WLQkGd4arBJ\nlGJ8cubdd/IKyXQll776s6ccowQJY5EtlKqgQ/zbeHq85GdteAe/B8rMKmcs\nfoNh\r\n=4sp7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGScK7yxAhgPK37yTKZWRzaaBvaxp+S7BlIDHLqizWuPAiAO+EOtDvK7VsInpyKY0frSbAHEMRy+sjNGIf+t7Bk9fQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.e7649968.0_1592602865573_0.20491524815136453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.8e21c78b.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.8e21c78b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.8e21c78b.0","@material/mwc-tab":"0.16.0-canary.8e21c78b.0","@material/mwc-tab-scroller":"0.16.0-canary.8e21c78b.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"87567a000d0fe9c1fe6f2b37030908bdda7f3290","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87567a000d0fe9c1fe6f2b37030908bdda7f3290/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.8e21c78b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MYd0EwVutg3YDWq282f9xTK1vx/25mIzplyY7BCPErLLGVJ7AaIX27V9L+ledqekkwGDmpCy7ibzT/BUinl/og==","shasum":"a9eb45675acbd7f9ad479b932183be8e867045df","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.8e21c78b.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8IoOCRA9TVsSAnZWagAAxC4P/39kjbEIlbCufz4dSGaN\n+fd2G45DvosBEcVuvpk/fJVi4I+Ib/MslSbZluse9GN9y/OixMqg8DhFzybw\n4/VAXFo5vbzYoE5yH9FzjcrsbBsivw5/zklE49kafGl9j2T4kEig59MderB2\nEyDqhnN10joLV1ntmV0z18/qDwXB63jZTiRA04wiYhFjrf/MJu2szvrrvmMX\noYshV8uqGUaG4XyA3O/ptgitBUE3kGlxD6tr4C/y7hbs8BWA+Jj7i4K+zElv\n6Ppb02EINeWrZ/gma1oSIz/NF1qBRXqZcSvbTVLLeC9K29lNdFPsqAFc2YG4\n/3cfSQ5Pt7mBO6PLkA2A7Oue7Gc9myVr6vhNokMP/keOkI7Qr3VJGGq6LTIl\nAe5uUCam/AqIT24INgf4Rlh3E9iyb0xnlqgJ6Ay4WWs80Ld6mBll3hti28Nw\nVx+dV6KRGkhzOhiILdLKC5WXpgT792jQKgLRMPmrg0+3kCGOVjZnqXIEtbHz\nyRfKbVjNnqNSlMJxZ6bwZ3vCfWKMvw1At+ZEZ3keSOqNSC2wgAbpKDbIL6JY\npsK9WptC1zpaEJ9kWEucw9pnOKqVCzN4aK2J+T77BilWpHa+OPIiXuMNiU0a\nixhP/PwHZy610a2BnzaJEAWkUqgo722hnUEysOO8zU2S8EJzZmCI8zAXtEWZ\nPzky\r\n=xryD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKq4h8r+dnpao8Wrde3q4MW9XR61A94nSfZpVvlxP3bAiEAm8AQ2JKwBuT+6Q1HBk3NN9lfGTS9X8cvSj9HFJPCdTw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.8e21c78b.0_1592822285795_0.5486859204018899"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.6db76faf.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.6db76faf.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.6db76faf.0","@material/mwc-tab":"0.16.0-canary.6db76faf.0","@material/mwc-tab-scroller":"0.16.0-canary.6db76faf.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6e23f797a12e3585f2e2fc7bf0311266b8908e40","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e23f797a12e3585f2e2fc7bf0311266b8908e40/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.6db76faf.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-gWm5FeczejQhHstjNEIuDUAKE3RLbgdkQcJn3VjVFsX69jQj0wL/iLvY5q2amEWkShVFcm9xCQZMiZ2mLyANuw==","shasum":"b67f11b7f2fc1ea0d7d05ddac53d5817d48c4244","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.6db76faf.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R7hCRA9TVsSAnZWagAAli4P/0dwWSN1eoZXdpoKo1xv\n1BKGrE7Nh3yANpWH/8qCtK3q84CYjtaVQKXeEfpieodP5Rm8JIIR9/uG+bq2\nFD5rq22tj02WU1Y8QaJfnhbL1GcNNnUoFB96lTM5r26F3dinjtJHJ2H6jMA6\nq0Zgtx/fpfQ8l2lmCivH1fr77wZ80VGrCJXVO64Yp0xubnaiHcRJJERWYBJp\nSFPK3rcP/IzHjJJBZW8bNVPVOGEvTDGsEvvHNdcDHt4fWxTbDwn2mJMfbAgM\nc34ISxiVCqeFW3DZmLfRCltZsfdg/N4VUJY7ZcQ6TjhfAbZLV31wgV5IyVfC\n2i/UWkRq5TmGgV2HJKMNyvijHRiX3oPvW0EJw6rmctPKJVAurJmlK/pwD+Hw\nBc5MIWdBKGZl+HN4iod1AucXuul1KhdWnoxwdSZx3mJoYQ6KQt5eCB/29Pl6\nJANYFtJoUXomY/ItECfEJ3mPCV5eO0MjUlZxXyheML7RnU6HoTolFYIzJmnR\nBGCQ5WDCAShmZ5Qjd58usgwjhpMUbuNcmKCQ+P99mNCPJPoLzWBHMzEuteKJ\nwhXhfzhDrhwResn+Ybo1eeU1fuuXCzW2IH6RWf9jp4+e1dLt+jR//ZECLtkG\nDoFtxuPFVxwSp60L5xcb+2jprX+qx0lOoG9nM/RM/C/24Gu9D2GDmceLzpN2\niRWt\r\n=xCXm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDUHL1EVvpq/YL7Ejxx8fPYko0/GetjsHNdKNkufmeYJAiAohbQRokYjjpB+rZgdwCQPgjpgPzy59/XOxMMoxWRq6w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.6db76faf.0_1592860384658_0.4208074536227613"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.c4dd9684.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.c4dd9684.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.c4dd9684.0","@material/mwc-tab":"0.16.0-canary.c4dd9684.0","@material/mwc-tab-scroller":"0.16.0-canary.c4dd9684.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"4cd7dd845f6929aeb590a441e62cfb720106f05f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4cd7dd845f6929aeb590a441e62cfb720106f05f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.c4dd9684.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-U8TJMpImJr/SDki6m7IJx1QLBSkxxqMEvrY6DjSqrbl/XEFemT5BqvfkigGzySQ0itBHQ/FUSOVRk/OJkymiKA==","shasum":"26cbe2a62dfa73b6105e0c3dc2d611fd26c892f3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.c4dd9684.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hyWCRA9TVsSAnZWagAAVaUP/0SMuYOaJnPpqPjco7IG\nX0hLIjDsi+IQjt3wVeecT4YDu0lzWYqlFzvCmt6pP1wYv8IGWX8PzwUNueT/\nz3X8LTx4A/Urxe8/l4FtEE/ZhVj4wiuF5arwO5jWPGlmXg5grDQV36wqjued\n5H/Ud+eL73iiiaCxqULAHpmoClFtsd5E1k7OkRLUOZd5h3pTF/D0bHVJ//Om\nVar+KRJBQ+D1AQ6OkvKYGbmKPT8sPTZzakOjhuk/F3ViiLdSQHAXE/hmDapO\nVB8qGZlks2t3vAdnUOgrwyhUkDpmQojlzpb6FHhMxuxnZwOF8BAi6WmxaNx+\ntj9cYszSsUGZGFwAxYymOWj4T+iasu/FrKj0Je4PrGDP4KG+iJQMYwPfzZKS\nsMjICqEVGw3CpQ65WzZchXHiYVL3cLvH0A/4CP3CT6OOLbliUyzALhoLWBVB\n2mMivZTS1MFNzHGT+0RzGBPYcp98AFpK6XXkVj9EXhf5uS+VJ6cPjFZjefJx\nAbR35xRXyudhHH8wTaDfZQq2OU1Ir1O5LyT0J1ffCiDZ9alslwLUJ3d68XSr\n+ggtls5HMcRo+LQT6ZJwhzMWAbRojUueJM8Bi9KwOza4ZbXqmqQVjZFZ87Oy\n5eMQBQyzN6mXUbxSFk8eIXwi3CVEJ28X5+LrBqrW/DP/xXzCguw08RB1REhl\nJX1/\r\n=BGEo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCSjKfQm/vqSWemOb4hdcLBKJKZMDn9WHQuQkYfCYES7wIgNPjenJba9ECJjqgBoNvRJlMGrwbYCDo8g7nyBsl0nD0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.c4dd9684.0_1592925333725_0.6774538194047552"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b3e53981.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.b3e53981.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b3e53981.0","@material/mwc-tab":"0.16.0-canary.b3e53981.0","@material/mwc-tab-scroller":"0.16.0-canary.b3e53981.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8d83f2faa9e72fded29e88f843dec080efd318b5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d83f2faa9e72fded29e88f843dec080efd318b5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.b3e53981.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mgu5sUDkrUKg/BuwsA4CpG/0Oe4AukyeTLI48vHNTBnTYQp2jiKmTuwyxWuQ4iXfz7HSxC1srjyboza1bKTPqA==","shasum":"12e1323c49fc2c25f14f2d9e0cf0022a2e6402ec","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.b3e53981.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8qDOCRA9TVsSAnZWagAAxAYP/AllavJ/QWm/4vLSO5UR\nPncWv9h52KR80Ar/ArjTVu9snBOOefVEHVdiYL2KZw4bRuRIDxLatlkT3+ho\n9XdgMLKfiM5pE6alQZrWHvvQYDz133UPiMl/nVaUbxFaNtH/KXvrNZnPjX5b\n69eltJ82z2b3n6eFZkCcZWJVr9UZ+MKgLszkHFzKSbRfvGtxRHavzgF4NMrR\nsjzn6qZ7v0lucWIArzx9Rj9GwV+fgBK8jkDN+LZJfGbvft7yUeaeQ9mwm7bj\nIEzhb62aGlN6/RAs1xYZCxEaWdQTo73cQ3Co+o8IxoUU/vsa1k6/p8US3PY2\n4k1P+bY+8FhNmBYu/a7gcc76ORG+3pUKU/+btTKsYwyeNk1l17B8bSLX65pW\nccnRgwEkur5ABARA9T08qMSqhtnxpsB5qHx+dm9gv4PwjYPAa7oOw/irpHKm\n+/cz/GvEMQlttkSQpw2yqjoPtOzm0qhg2kTNQAgziH7AyAv9jVEmjpFp3oq0\nDAy76ZdOcHjNgd5MCjuggGPa9w3aYEwc8/DVmyleAPAfgPY+Y5wY4HHMrT9+\ngr4tXjqAYnNHWg3fEzrA2jBVMfnILbQIB2MEVC8v9OVDe+D3mqy8PZQ+u7Eo\nncN2oSOyiylLRI1O7fG+pwoAn3NeXYHqweIHaWxZdfaLmmmi2LaeD7zFieAP\nqaqm\r\n=DrUm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCUkTsX7HrMtaKy6H2W8S8FMwudXC4ffvAcMqd6PRxZTwIgRWrCpfF+HpEcg3MZUi9rbUV/sac5zCYIJvDcek8GR1E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.b3e53981.0_1592959180952_0.051745441447093254"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.b9468f77.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.b9468f77.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.b9468f77.0","@material/mwc-tab":"0.16.0-canary.b9468f77.0","@material/mwc-tab-scroller":"0.16.0-canary.b9468f77.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"89bea892912be98e07d72fec0e142b11d1874487","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89bea892912be98e07d72fec0e142b11d1874487/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.b9468f77.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GIofVVM64dycWkZEinP4DQ42AqSw6u17cuK/aNiLTJXMliRoEDHkpOehJrTiUoRZVRikSsL3ZpmUxgdK8wj/8A==","shasum":"c8be64c6c5c160293da175bd205b44c9e3bf46db","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.b9468f77.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe88umCRA9TVsSAnZWagAA74MP/jn+XjSZYf0IEJySIpPc\ndAz3I+4cUmr0nMArFJxE7/D3y+PzOST47Ci9Cq36ni5t78MGfbaZrQRQubPp\nma4rp+NQISD1Aj0Rjl8gOd53NhAQb89VHN3W14w6XDOHiXDOvBicGJTxj5v6\naGJ9DZymYyEhgWLHn2Qf96P30Smhzf5iNmAnUldz86sBoGBCJChIGxqwOYwR\nUw04yv4mgXcpxb61R9VsA7lQq7DaR+RPuDMYe+YXmUPZ2ZhFa0I92vk1xsuO\nRD47zJ/+bO8LLf9aRW/o4qZl0cAYk8RDTwNrKP3OnnRjn65Bs7+NI4PsKq19\nbl6lOu3lY7Ok4Lj6sClu2r4DXM3XZWIYK/l3hrLX8+rSLlbsBXsOicVhsU7n\nLN6vidRTExS3EmI3xLID63m7NbJvw6fbOoyx/dPn0kKv2Yi/GrYFRTcvGydV\n8YkB+Ul9f19zUDipemH8ZkWvHHQ3hkg+n8Rk1ldPbPU0/ihKxW2c6fKPZ5RJ\npCx0KH1RdAG2x1cQI2QW1wc5eZsMYyhvYt7PjXS6Lta80XX19yr6dTHxWW3O\nzfZxYUO71Lz0jmqgCC6dtsoq//iwM9zCeiKcRgW3KkGMa3HDnMU0UQS/T4QM\ncBXL0Q6Asqy2P3WBpCOIwIIONmDdsdMhwoCs25QeFxdveAqTqtIvOdSaP35R\nju6z\r\n=Situ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/ay+iQ0RtiBkn6UMKfq91F9CSISq6DxIUxieYa8564AIhANdfsKKG6lO94HEEBoZQp9h0lcK/jHim97ic4SfZJ6pC"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.b9468f77.0_1593035685710_0.9109821023990441"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.eb790e49.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.eb790e49.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.eb790e49.0","@material/mwc-tab":"0.16.0-canary.eb790e49.0","@material/mwc-tab-scroller":"0.16.0-canary.eb790e49.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"722b9fe701d60a27c2554032e63a2a7579ed4306","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/722b9fe701d60a27c2554032e63a2a7579ed4306/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.eb790e49.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RryONfMdZv2sk/H1Vx6mC6O4WLBncLIbXkIcIW8yIMhO4C94QOswOyzwWC0yyVaqVAp+lozxFRDtn2oTpH3yPQ==","shasum":"151d07637b3584eee5e2dc65d4cb8acd0a76f03e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.eb790e49.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RTXCRA9TVsSAnZWagAADEgP+gMQlWFvqBf1RkrTgDZJ\nEhgnxDssgthHp8qUgMoVUeJIG7iFUE71TShihXNvtdERnp6E73dYAawuSiHm\njd1W+YDsz/cmScp7SMZls66F8B+uRJQSucSWGTOO2pbACHNLMvn8ug34h4tY\natVXO4qEXO8Bh87nptoPZIudEFc92T+ZIQKy57Ig3/CKXjZqSK3kKcgOkYS4\n/MW0pp3PIv6BLDk+GB8YRNNlnB4fFaSxLXaYIf1TK0pnum+/Ak1tuy/dCyxP\nMmh5wX7utcpYgQgEW49HkW0XdZxCZLIX/dz8+fW6YYWdxxjudEDas77zTkGk\njbGnVZbX4jy7oIru0SEhq1lZqR+RicDpzOOzdtPyhFc0enBOJdMOH+8KnkY7\n+pnNcOGaHv0qhZSK7UuHJ4BrqsUOrIAab6u0vQkaxOn1GM681hKX7dn7qpWJ\nc7VqLpyt1vsEXg+aYgYu7n+ska/Fshm4ovAZnT7wAGUSLJJV9BTWfhLktDjl\nOtyXpeobeuKbeC8v35butttBSurc6ILqIR+f8VzSONdot6KlJuoAEt0okvHo\nYuhCyDnH6Klh+HXfGa9AryTbPsp1/HtYXd0Y/gqQ/MaWsCwVBsEPF/GxHpOO\nBnAdAm/paqJKlRdt0KDyPyKHq4kPFdcwqtjvPrkLRMLDFoPaNo6SGcWE8W8Z\nVCQE\r\n=Oh3E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCidq7R/EXwPIt1NP5adRpbT/2KAhPJ/vMIgQRzq1HLgAIhANekttpmv0sTAolrhm6mgEt1s+9JAcRX/6/WGHPuPmqB"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.eb790e49.0_1593119958967_0.9226728087775458"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.9aa1a5c5.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.9aa1a5c5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.9aa1a5c5.0","@material/mwc-tab":"0.16.0-canary.9aa1a5c5.0","@material/mwc-tab-scroller":"0.16.0-canary.9aa1a5c5.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"04b200e2b2832855ef5eca7e2000672e53739c05","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04b200e2b2832855ef5eca7e2000672e53739c05/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.9aa1a5c5.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dAksV1UF/EDsGrix7dGTnYiszCvOFfnpQxzdKW1hhb10Ac5MWqP6oxI1r7UB2fOgDxGJR4FyzUwqJSwk5Qkdgg==","shasum":"278caca044b91ee1c391703feb67ebbec7a2bac4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.9aa1a5c5.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9iriCRA9TVsSAnZWagAAsTEQAJ/HFyE+xCMZR8/BOxzd\nHDbDkgDfprJ8wP5xyDbl3s7+UtLOiSbKnUQmUJML5O0EVCxdw0ad65Bc5mah\njp6b42mUgfFMgVKQ0s2cECd16atX2TW172BQpDNBOTswqpILDKmeyUSrvelb\nlnmtmnCq2CejcXzHulCFsFKvCU9vQyOVf0bWzYAiNQjYMC5sLt8JalZc2lsn\nwrtkq+G25NSi0Py1xwbJWxcQOljXaVPyWKa6+FS5lc+QAmtFQ4DTm1LJRr1o\nMMpA4DpN3omstUzRGbo1UKeF/9+fDKonSduATQ0ujxtWFNc4LXBnf2T02vyj\ngiIAO9kugbwyHXRcXCvb5KP+SA1O+NlkuPgX+buC38Vvy/FsPDJ6qgGBh+78\nfR1djm9rBx46oAarX4S0YmpcYbmhSRlgJnEmdCYlFNj4FNbhRmAzeGtf9LBD\nhH64NBxV+cLznbn4zEA59GdfgyMeXCoFjjmipVxMb8sG4EZ49SW3q62mu7n3\n7j0nX+r+QIPCxRxSvyLTD5sYhzR91VQozCMRzUIkgRLLrh6LaEhHKKTZRbgc\nuJkpsBPfLUxwnjV28wlNbgAvKtOtz4GohEAB0vmBNDAGpON1bpgB00650aaQ\n+qYi4oRHB6F5Hj0odC5X41z2/vagidk3NifKIDTwUL6+//iJ7cFGUNK6Y8ZJ\nICK1\r\n=PZbA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuUtj8h+0O9VIBdUFECCES+OPXNycgQoaoNz6t9NCQdgIhAI0nAjLuLXa4q257lzHEWSvYMw051fcRJNxYW+O0R8jz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.9aa1a5c5.0_1593191137648_0.2885296817289156"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.d36e9861.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.d36e9861.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.d36e9861.0","@material/mwc-tab":"0.16.0-canary.d36e9861.0","@material/mwc-tab-scroller":"0.16.0-canary.d36e9861.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"06dd7e826645eff53f5923422d6024010828a4b8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06dd7e826645eff53f5923422d6024010828a4b8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.d36e9861.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+p1sySMB5ZisD76jJsmuhiazT7jxSweRLCVlOFPVJa3UPNA8dnvM55mlgZWH19GnSqIl81GslSEwq17ruA/VXg==","shasum":"5e115a09c844c33a0faacc40fda9aa18391dc4ca","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.d36e9861.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jIxCRA9TVsSAnZWagAA+egP/2z+zGmsPHJ/dijrEGJC\nEv4DPwX/FYn8t8UfOggQ0rM0QBmU8cnEJJm5w0Kto7KtGIJ44vaMjXWon/OU\njZnQSsg9yr8+vZExuFoWFixa4e1uKxp2Q+CV15egvo7SJpTL9li7iRbT5F05\nmUEjqcQPg5xX2dnWEGVikjb5yPIQgRbh+uQJe5u3bNR39jrEqmvP2aV8el2C\ndgxKgLhVpIVdKc1nbHuTFMX3yy4XeaPywJxWwxjMCvQpqMZpowsT1S8q/eGf\nJLCDHGQmE5bUMQVfQbf+pXbtzS+I+TjQWGGh2Sf7nTEA8zODIeqg8pTBd3JV\nn+W1F0ITB5FV9UbQdNk0S5wwobu+tAg/9gdDKVSqDtvBNQ7Ism6bAnJ03qRB\nQef7m/cr7Y4KWnDXIVwDZE8EFCzib0CDMFMRLVo1KbyMcFRk3W9UewFRRXn9\n6XaXdhbMKdIdAiocJuvHzJ/DJptyD/qmia+gTVxn+XWXzBEQuw4awOh91wcc\nbRxcLMAETKiP+RA5T0z5zQTOItqKu4/clOKeYjJC+pHwrg0Rof5fHsAtxa6H\ng3doDxAsCba8z/hikpuycLTtIcKHpdnMo/TBanlqosRRn0vTjeERoFF0mgQ+\nGBWHdpk2bw3Uw70ERn6QAUsOfinOnSDElF7hzAWd/h4W/n7s0I1375zSiW2q\npv2g\r\n=7Xiu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIByEnHAUDz3zEXtLsDD3l622yArQuyhFmYK/hl6Qq+C9AiEAnPyMUG73X48JkZJaMpfImCeHpYwK3jjwRTpkpNA1ty8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.d36e9861.0_1593193008644_0.37820093564976776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.155c2f85.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.155c2f85.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.155c2f85.0","@material/mwc-tab":"0.16.0-canary.155c2f85.0","@material/mwc-tab-scroller":"0.16.0-canary.155c2f85.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28a52966d069b05ddf3f845738ff3207532f05b7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28a52966d069b05ddf3f845738ff3207532f05b7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.155c2f85.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/9ENdna9M82oNYfzjNRCYig7H99xtML4jjBJ3am0aKgSrOH4lYMm+WurLE1UhaoGsmgp/h9eAETKimZ/h+gDqA==","shasum":"df3fea13c26ef7a5dce72cd2003e0092c34b792f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.155c2f85.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oUcCRA9TVsSAnZWagAA6UoP/2pXiQ+Jk35+3cgjBmLJ\nOUwdQvn8m+I6ClBEyxEp9GphvEgYH/8b1XGE+SFT6JimL4yMV4spVZxah0bA\nadbQ17FpP2n8V02XiBNWGte2K7ZAFBU57k09vCtNlPahH9UJuP3uGMuolLNm\ndkkEg7sUpxeOVpf47MJGFqBmklT30Ngf+TWCncxpcQtCB2du0m0/pA1qVVcu\ncBN0KQIkrJV4Wlt7QuVOyv2zhyNm9VbJ0CKD9iodtkYcUbZkY2tw4dJ64Bei\nTSU+8o1Ob77HkaGiLr/zJzf4C628+PHEa5lkwG8dWRWCu4K8zcoIYY/yRqLj\n0M8ldXRzE2PB0tx5MSPbPx1dduLJjmDitoa8X0DHD4fQqlL8M+80kzknPB6w\nXJ0BhsSpJvPOYfKQ8Ml9p4qhMqzUalIPFQrnYMSQ5O8NgKASdGrDQ4Ib1HJ0\n+aMEC0V5kYEyjVjK7CU0gYmUGKaAl/VSr6uPqwM2RbiB7ruw+T30TQJigJ3Y\nDo1E0ewhRryAFYOwzditDjq0gogSvwvQ0EgjJVjbQzMPrunrrtB3zwbghV2Z\nO92229HoJ+q0+rzP8BDwkNIY9+Kfz7ehGuyoLPbnker8Liu2izdz9G+uXt00\nxZWDJHFCI/Rm/DcWIfmNi2fN35hdqdPUjWlxKwpd01PvPFydx0FQK2tnwWma\nSIRk\r\n=xfWg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG0IIShGb9lM1bZBqiFYBgv4elgmLMgeJx4ffynrAVz/AiBH3148QGfEy2zUCkb+vqPd7gdyMwp0SX/85NEUtNqmqQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.155c2f85.0_1593214235786_0.3729594863476058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.340c9c40.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.340c9c40.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.340c9c40.0","@material/mwc-tab":"0.16.0-canary.340c9c40.0","@material/mwc-tab-scroller":"0.16.0-canary.340c9c40.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"b65b8e518436cb4bcd2fd8c59ae2898f2715462e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b65b8e518436cb4bcd2fd8c59ae2898f2715462e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.340c9c40.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pr4W5PIEFbdTGAplDgdnbksvZtzYhXqWLcLyqqw0bUvk0PDfri3/WOvIlGESyX8rIWo0rEtoXEbptLXWQxo6+A==","shasum":"6ea5535126c8e95d7577809b868b6e05f294ca2b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.340c9c40.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9ob+CRA9TVsSAnZWagAAQIcP/0zH31bFi0t/87PrGlM6\nx1sbcBiM4rpRhOxa4mGlJaC55Y3oNysStbZeqRkKv17nbcHaTmEjKG5GWk0o\nHw+nAkdPhcw0lSuwZ2tQJ6MYSNb973wILtBR9qTo84QkVLfYl/BeFzvrAoUt\nR5bx/9rdZ6U5ROHBaPha4lYzfkOANfH98kEh08Zzx7Mfm89TXaOgVIMQ4e4i\n9XoXSUUMGPSiBcdTkpvc2H9cNpo7BsmoPxRQEu993Zby9uw0u40FXQG1XZJo\nQgzvzcEAAzKWeQg42FbD3nrlb6AVvss6SuJvhK3uSV1XYlmpiSHjM0q8H3Qz\ndSDlmXvQDF5Qph1A07iAnnJhbCevWQe0wVe7JlOKMcR0Cxw5ZhvwbrHPgGOC\njZueuzouGii5ApHLU67hCvXMLg4HOpEI6H9fcqGM0P4dE6nNHgP+VQSBk41I\nkb0rj3XTOQgUlnx/7EnDYlMH1uXHMyb0N911VdngxLvBxBy0RGuDkPfDKdgM\nEJrw6XSYzHG9gP4xMbPLSQWQlZCtlj597jIY9O8BNxXf4vqUE0wwu8U+8Yb5\n0qesnihtxuyZFj/0lqv3KoNdA0fPO3wKbsm1AokAGx0ljsYy5g/BcjZoTkow\nKugv56IgNHNHlP6j5Tq786L+vg08PIzJ1GiNRysCmZq61H0hlR4xK511UZDq\njFv3\r\n=5aAv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7cDaxiyYKQPLB9Kc4KI1RueLe+jTOARSl1siavuCCigIgbo3YXr8Qpi03p2lmO1R/TNHhcu6cy+ynUkVTHlimLnw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.340c9c40.0_1593214717828_0.6211299883379735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.0-canary.a3384d2d.0":{"name":"@material/mwc-tab-bar","version":"0.16.0-canary.a3384d2d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.16.0-canary.a3384d2d.0","@material/mwc-tab":"0.16.0-canary.a3384d2d.0","@material/mwc-tab-scroller":"0.16.0-canary.a3384d2d.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e09d50d940709441416a3ec78b0600a867285980","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e09d50d940709441416a3ec78b0600a867285980/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.16.0-canary.a3384d2d.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-5b14vq4/t4f/r0RMVhg6oJjNrIJq2GDSoJk7PbCny9QQBdf/qsPY+VrZtpXRuK29D35rZCzeEbhc6RLE8m17Fg==","shasum":"ef87aa0c3158392f62f7c9640001c42033b8dd22","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.0-canary.a3384d2d.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6gBCRA9TVsSAnZWagAAyYEP/jgGjaZ3zqLm15REE7YU\nNTErH+nW4sByXp2ebz/Q7Rj+4J0s6zFDN1kW3ngIbGzVMN7Ncxv7IQzRlBXK\nxKJbmJEUx4pWeiNEZ2uFyMJ0vD7o2iGqgSrjaif8eb4uUaRDRHql08Fsyb5Q\nDD6gVI27UzOX4H0TpO6UbiwUEtEUeSGvlj4qyZVo5u4yvz1amsVwp95PWMPk\nHuPWpaJ8851qQVgRvDVSVDprkfJ7Wm1fgPt3eI4LJDHG81+RZcq35Dv4QEJo\nSkSTzPGZ6RKLUPH26oxEFQHArugfeD4g+r0ILmuz+7cVIp7cXd5s2BvCBQH3\nRuXrPFm53PYzuHO/AjuyBPNalk+igYKHjH4aYAF/xVyiW99xmJQ2vFL4Lh8W\nzsLxup+Mc4+lT3R9XUnHES2FLokltRAfKTB2cwzuHdcxKEXax9Kx4WpUNoah\nOzxkPeDQH+T+7LHEXRg77Q0TsxnHszSkv2p9uFPg0TycnxUj6STR2yH8f24D\npmtzuZUB4sKRd0of8D6eSndMBYBJKZH8qLm85xQSjlfG41e0G7RTxfQNJvll\n/VTJ553cv9SIblOp6b7YuX/U/7pwVJtrhumdPza4YaJDbd/POAj0w2hpvQVh\nWVgs0RRE98CPKwj8pSG7AxHlv4pvg5wjjVJnJNskkypWztJvqqKNS1x+7057\n2RPP\r\n=8H0K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgPP4FHlUrFIidJPH9PEXvQ1I80ag4zKHPFoMVdaFxAwIgbIDsECPXXLB87P1dtN7Hvkw3+irre6awHgEbT4yBuJg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.16.0-canary.a3384d2d.0_1593550848851_0.7463208105330328"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.6d056c96.0":{"name":"@material/mwc-tab-bar","version":"0.17.0-canary.6d056c96.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.6d056c96.0","@material/mwc-tab":"0.17.0-canary.6d056c96.0","@material/mwc-tab-scroller":"0.17.0-canary.6d056c96.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a0abcad0ecc43697e7c489d2c4ddebb257cae5e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0abcad0ecc43697e7c489d2c4ddebb257cae5e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.17.0-canary.6d056c96.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-xDkCmXe4camyuqrMVQzZghXfXcsxeOJ1EqFXG7LXNFXczzTyiIlJcB1XgAlPjh6I0+IEyEv5wDT4xWlQ929R4g==","shasum":"5f02cbc05db09707a98384b0347d4d2472300cac","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.0-canary.6d056c96.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6oyCRA9TVsSAnZWagAAcFEP/AygMR/QgXITWGhrHVJm\n7oqu7xdvrEy3kEEvgIkcwslkBIPckI/IZCJ/neMOtnDJ9onRKAM8h5CRaDmD\n5uE0V5Pyut9xRXuE5dxr6qvIEHaG+TV7EblmfgMqMWR5A6pDwLnpKnUjUk9H\nQYzsu8vkRPw/GfPpqugtNLr/c1lqAc812XOIlPnvK99egaWdvdaTJNmpr6I/\nAkl/I5MOisxy/YqvBmT7rDxI6uoWDeWylL/6TLrCZJSF1M897Jk9d0hKY5ab\n3BlwZefYcPq7CrkcpGGHYgprpccR7QQ6MHt98G4HygMS0bKm+MrdTLo2DrBy\ntkWP4BBLJM0Dx0UyEKabcNT8LLIYdNWXqCg6K/Ns6YbWyXqXlykJA9LNC6db\nA2LIcCbH7gA5afbZjXaqR8GzOnpkkGCkLtv7ds/xawPLZ9KO/3kQlEFF60dl\nKfD7ybgWo8RfsuGRHQ8I/Xyvvnd/apbNVQ8xR0qLrWgDrkG3F4wT1zS8m5Md\ncc9IryxjQ0Nq5p3pJRZtCaUDRHuqicfjYBMdgtap9JGVFGLU0lAqWWvG1UYl\nZt95VXerOCXJRa0jK96LNbZ0W0SzvHxIxv58ZPfLZKfFcqe6rmmmRs8YKI2A\n+EuMJoCgOzSE7aCVKyr7QmNkNoEcMuwr2x/NzWMwCjqQtSDlq+tKMy9qn0e4\nlFZz\r\n=6Rp+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGsacx++aCw3ZieyYIRMSbXIn8s9/Jrwo2ozX79UALCAAiBZruoIfek+ChLAZTuJQ/yxQvIMoR8KrC5v3Jrw3TlXNA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.17.0-canary.6d056c96.0_1593551409931_0.8031770404222296"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.16.1":{"name":"@material/mwc-tab-bar","version":"0.16.1","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.16.1","@material/mwc-tab":"^0.16.1","@material/mwc-tab-scroller":"^0.16.1","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b47995b0b098b9e7dfcc7b735eb23e892cbffcd","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.16.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-SzTob5U/ExAy0MZOPQImq/j2gLkV2plb8LOdGEG2gFaOYG356dWeyIXEYSmxvBHXTsTDaRyAaWOSqZdV3XeGZQ==","shasum":"1781511e50450b0441ff699fb0400656397fb984","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.16.1.tgz","fileCount":16,"unpackedSize":54082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+6tTCRA9TVsSAnZWagAAWUQQAIz8ZECzD4k7eJcamzed\nIY5WaOp+Nv9GEouHYdDy98K0xOdKWX81EMxq+/4XS4hAMa+2aznk26NVGunT\nwANT9wD4a/+J1SB8915TQvPwjTyeZ9mZkdQjPayMVU8hARFhUTD+wUaLAQ1Y\nr/0LW4WyZ38mmd9xWJobhEw1DbQQahu607wCiEQpfFw/VpPc/DlnT9k315OI\nwehkcs72GzBnXC1ZETll9FKwwSUVR+Toju5Pnrid20HBBLRWROO6d5SaxPg3\npxKG7xwULpAbDeu1vg9JTs9k56d71YlrvcGXNUQ8/6KYPSRC7zTY8SdRySqe\nn6WSZe9024UDTmpa4Yln+geFeXgNXzqTyz71c9xefTGKT4U9Enijzlp4nKIN\n7Qoykghc7LheZJ7bXWFZ3Pd0zV2orKg/5O7U2DVzGVfD62u9CHjtqzNI+Y2N\n03a9ccpJ1kM+NOg6b0rqKEIihBuDsMRqrZp5KOIKtjbsvX28gzFY9yIuXdRo\nbVYp3gAuStBX/kQdW0PKDuLxUi9bR2wPBmyyzo3DRDKHVe5QqbCb8l6ouw8D\ngEnd+NKPuIOf1RZA+se8sQ8V/C9P0ifJgaja2DIgQZ3JB+XU9MRdVv8q5/qR\n05/8Jdpk0QXKrXhLZyIUZck9YjCmC9J6XmQTQ83FJeapePP7G6rpiCJcp95n\nyTf6\r\n=gfAq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8U/IeVNynt87EK9U8hp4QFHLGoODos3N8R5iQrQJyrwIhAMip97N96UsgMpqyyvveQdBuGN3NTkwv95bGYsLsqPC0"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-bar_0.16.1_1593551699189_0.6416033089891684"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0-canary.f7e37607.0":{"name":"@material/mwc-tab-bar","version":"0.17.0-canary.f7e37607.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.17.0-canary.f7e37607.0","@material/mwc-tab":"0.17.0-canary.f7e37607.0","@material/mwc-tab-scroller":"0.17.0-canary.f7e37607.0","@material/tab":"=7.0.0-canary.b9776b1d0.0","@material/tab-bar":"=7.0.0-canary.b9776b1d0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"898d9ba1603fc85a0dd4f96b0dca134bf20f6b37","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/898d9ba1603fc85a0dd4f96b0dca134bf20f6b37/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.17.0-canary.f7e37607.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-0ShjjI6WGapShXlYRCnL9Ps60j6Rj0dTZKgLHbajhtaGBwDKVO65Ewtv7HgdCU83lMoqHEBkdKVm4/nqwQIuuA==","shasum":"5758f0fb311a738217d1ddc93fd002e61dafb4dc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.0-canary.f7e37607.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7JECRA9TVsSAnZWagAAL2IP/R/Qyrw35cIzYxafAXwA\nc68NGnAnKxhrWIY9wT5XEPp8JaaKoS0SDgiQESUQhB91NrNyZy39pGQoWhS6\nDBsIFoOsXvHcKLaFXG5zwZcF2CDq+NCyZFQxFpjlwWkvHPnmubVnnLOe8/Ih\nsZ7XQsfiNUYpSNbxfv6EG+3x2OIWCwJUkm6z2mewGofN/c0iRSZuO+vb8NK5\nAdC4C0sgd/u2Y/sj9yrM0STowloMsbySX8oQ4RN7pFAXxq8BLIsXyW/wsEGb\n4wz8UAGs4pImsuxeSXdh1lgIJw5RD6M2puJOCeS2txZJIiLWH/FGhH6qXdKY\nOgOcfK3lm6cNbon8IGRBcizQWz6a367o0D5Hvp9T95DFExVo+j27Z3lrazVX\nJciY36SALDrF+0H9gCPB0y7wf679QWsQ2uCRlqY7QzE4GEhNnDsCJy5J1GfR\nzllvMGJh889GDMApMDza5tavVOWmysOCM0k1LCOfgLrV6FBtVcbeP1++mFnW\nB/A/+WZPeWhudzPlMU4u0u8LmDYsTdN45NaapU1bTTjvl1BF02nT9/4OFC88\ngNgdaFBQx+vdaXae3X0UzGCEHTTeMtGmA24/o+lKU8QiaXBISB9wPc66KZ7/\noR36Dw6rpIzCv/GeAKR68+O7chGr+m95Q/1w3/k+rJWofjbwLYKWamr4WgfN\nlLDn\r\n=Xqrg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG2152Tqea9nZmPDFJuSEjfS1IwQFHQ5z6uN4+rb/CvDAiBdch8nr1HtTxANZc0gFgW4FfY3h0iQ576uxwoU8skR0w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.17.0-canary.f7e37607.0_1593553475534_0.5760310242819173"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.0":{"name":"@material/mwc-tab-bar","version":"0.17.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.0","@material/mwc-tab":"^0.17.0","@material/mwc-tab-scroller":"^0.17.0","@material/tab":"=8.0.0-canary.610c26c4a.0","@material/tab-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0afbfef219df4add1912c90b8608ac93135d876e","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.17.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-4prk4wez1EBR/5HI3y8op8TVEWE7sjiqKIieKRIpMpJQyC6cP/aXZFjUgQ+VwOHJXtnIWo/qSzsj4ocuH7NsSw==","shasum":"fe9692565d7b6b626a90f7003b8362e225d3b53d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.0.tgz","fileCount":16,"unpackedSize":54082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OeeCRA9TVsSAnZWagAATyIP/johZcd4V8ab3qhbdtdv\n3ZttxZRJZhZaZNQgbCsCDcVBQ5SlqwGIxNE6GEPrI4aJUWJXPzrMKHlQbrdg\nMGX1z2yD6eGrkYhYmWxvqNSUlOpq+4pgyqpvZ7fBQosz6axQ905sAF1GWeX3\nmo0kv0qbrNDwKgfvi10v5zb0TdcwtoCnd1ByFVOcA4oasDub9z2g89OGlieO\n+Fo0RpWaBMXrceB8WW0k0AigHHuXvPpUBAcEzVwZEPZLFf99sLBEjNKxo9dQ\nEBqE46LLWUEOLy++ZUCYzmsVU7C8ABGN85cVCnl3P9d6ea+rO2su9X+yoKX4\nbEs7xPjK+OGwsuBf5ZlAQz55pz+mtkqVdXNU8YtNPPGuOWKTcDIMUTn0waHd\nJ3a8OfOE0MzNqQQ6B1FcC+SLb4d8Dx5MAEdMw1lMPX/tx1JSCCmSzZ6zJ9c3\neGeI7snw/70jrNadyXRopWfdtrWAGTmFNTulP6p/Pe608a9jbiOO3lEh77YH\n1SW1ObrcsbLd3uIkcrxf+jiPoMubBhEwQxABu1BMbT339QEaGpV5g+f2uT80\njRkXqO3dbbkPDm5fomdAfwCj1rkBOv0veK8orwHB5DDMU6L2e1y2rM5NQuEx\nGkt9Ndo3Dh8Iu0y0D77LHdqY5tDAOk2DnEl0qkiz9J38dnk1683BcU7GHMJX\nZQGz\r\n=14Ut\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2KDgr5nSTjSmeZL5ZVL4UyOVo5fPXSG0Vx6wUkHiaRAIgHSPoMc+Nbw5k4+x9FnJmgzKfxEDZSuvG1fYVRZ6T7DU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-bar_0.17.0_1593632670285_0.7814657770115141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.0afbfef2.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.0afbfef2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.0afbfef2.0","@material/mwc-tab":"0.18.0-canary.0afbfef2.0","@material/mwc-tab-scroller":"0.18.0-canary.0afbfef2.0","@material/tab":"=8.0.0-canary.610c26c4a.0","@material/tab-bar":"=8.0.0-canary.610c26c4a.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"22b3cf02901c0c438f1e4150ce9513d5f45f21d1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22b3cf02901c0c438f1e4150ce9513d5f45f21d1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.0afbfef2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-lZ8WLILJVI746G8MpxXWWnewbnWQGpZOjRCNvIghrBGdNmpExflfYwTLSIIXl6kulvNK8moyddiYK7Uh8tNtUQ==","shasum":"40fc0ccc28a287dac4d19d270e4918d1897ed0ba","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.0afbfef2.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OfBCRA9TVsSAnZWagAAHEMP/2UPQ2umjZ+EYzEFGs+D\n2WfpCDUyVauaKHbGNRxABXcuv5fXP5V3F6gUD2q//4d4/tQ1ipoCxotBneKd\nYj0DHnfTRIS8yv70kvVFkwyU4V+PUI4qXLRxJyguRN2LLz9xhyYfYqyDqwz8\nYXOBSxVt5Nk1q02A0eg6pomFley2o2g7bAnneDYZl1786ypqPUe7aEg3I9qR\nV3JMwGEpT4fVYQfytwp2KsUFBEyGLqvs5LduT084fsFzaa/0ZQuaFmbo3j5q\n6wFqflGeUm4smfqJ/KT5Dxjbwblmi1KoILmN8mQDJUu6IsFHYG4B7ItFKffl\n+tVGYJ2OfN0M8wySVXMCOpZLbjKldMDVGW7VknwLJVTtsYzLxj/wZAlkkaba\nBVBSRAZ12dDarCrVEFioEKD6qMZyL23PGY916GY2txRI6NG5p706e7wuIkok\nx3ur/N6Z6vb02u6VpeDHw2fakWSzeqCBwn8jG8rdeDYxGxmc0kMSbC/DuoIG\n1N84ukGhOhY7THX2SqjQ5q2eDYsbsGGckgYECSyaHkdeErF84Df6XQkOFxeD\nurIxtSsCMHn3xIJ/QEYdBGIw1yRy0/PhduCMxRXhY1Gvom+BbIIPvoacUBwT\nW4715T37Yw6YFY0m61wS6EEBMXGZozxQOlexot00Ccn8LckSnocKjKq54OQ/\nBXFp\r\n=S5w/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmxZXQhaY+xpzOc+x28AqW1jmmxoa15ATk3Gfnu90BUAiAebwFxXFjfys+wQW/S5DPynNq07Va0gSvUt1wcUwC2UA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.0afbfef2.0_1593632704960_0.9898550595380426"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd970958.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.fd970958.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd970958.0","@material/mwc-tab":"0.18.0-canary.fd970958.0","@material/mwc-tab-scroller":"0.18.0-canary.fd970958.0","@material/tab":"=8.0.0-canary.a78ceb112.0","@material/tab-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"7dc6a8720f1d1adb0ed9ae03d2ee54b539251905","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7dc6a8720f1d1adb0ed9ae03d2ee54b539251905/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.fd970958.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-43UEjLcNUsmfRBeIZWKy/05+V43/7Pgmy4Ed4d1i8rDNz8ZRJGAWSgcOQZ5hGXQxn8Wun0eORNWBpWZ0Vo6NEw==","shasum":"b6294cab8714eb3e22f64bed3ada33a21307f20a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.fd970958.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/R1gCRA9TVsSAnZWagAAfQwP/1zpaIsfecuENyF1efJi\ntN7nLElNxj0xFfxPsHnLgwpAVUS9pb/RIJmnICCsACWComCJfTcanlrzGpDY\n8nCskwc9YQD+6eJtsHjOVpSxNonBAhB6B0CeLhQuM7XzFC6sjpaEobTmxs7w\naowzMtFFXKoQqDE4bR7sappDZ+O2oQ/oRJae1YDlWNcrBIhXxXTy16kQh9NC\n2Xtqyni3k0HAoBtYv1FzoadKM0Rf3bnLibh4KjfSRrZ/Jg0C0Z0C1+D3W8Ek\nnAqjsxns+6T/CCmWFl1FNBprMZHjh+Clw1tnxIm5TEgm4l+PnAFUvvl4BRrQ\n5lDVbM8fl5chim1gZ0rrE8FHAajCqDK/1P2vqCF7Fef5oNR6B8LB4ed3Trgi\n0cHZzAmVQjASF+gEZVH0mcqTk2wLxLaAEYsyT6Tm164LK94to65IuEue4l+J\n3ZbPrVZxU43kyG1eRvAMeWTc20dEj7kLLCiRh4hpf8NJ8sMFnxbakShK3MtZ\nwWzELmlUtDCqK0BjlPuzJ8K27BbNs3Zm+OZwD4FiBRuMR6KEnUyd22a3nXr7\nT2pDIXUOv9f4mlSbRTeKUYpscMuRteYffv6xP/PNaMkODZ0O6W2o/sVMS+8a\ntYrsIHKDPFMv73KhkMavaE+9BYC/s0OrXSSmp6RDatCOvDQoIfsbWocXWreL\nPcVv\r\n=4DMV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtNe3ELxLMhLSmlvUB8yGOrD444RjlUyJr8lNsMAmznQIhAMuLa2APR88GoXcGmEmKgU9AhqyYGF1tSvH/uAAVrF0a"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.fd970958.0_1593646431789_0.9936198240228735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fd44be19.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.fd44be19.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fd44be19.0","@material/mwc-tab":"0.18.0-canary.fd44be19.0","@material/mwc-tab-scroller":"0.18.0-canary.fd44be19.0","@material/tab":"=8.0.0-canary.a78ceb112.0","@material/tab-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"19ed8b1c754f72137cfbe305df2c3a6be32c041a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/19ed8b1c754f72137cfbe305df2c3a6be32c041a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.fd44be19.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-jboHRUZhUQm63mRaljIM/3clRfyKbBMj8y/YviuXBUzwiMZvegYYY/JjexDCmAozOVJDgHo53gU9VqlkVHp/9w==","shasum":"76315f50f11b97ff5e71561103e90425290b830c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.fd44be19.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XVHCRA9TVsSAnZWagAAh2kP/jsVs4rZ9xoeqme6Mp9A\nCJIa2o6tPL2b3fC1riCJ0KctnYd4HqDguDGdvdmfBWSqACpDwsFWYczMRo7B\nc8uqiY4je8fJ5dQa+lNogzsd5dkbrAJDXE2JRI/aly9nAQ4tAY/voFjUsHns\ngutfOoKis4lp9n6u5eAZmwkIvOyn3LS4ULrntBCrC5YqKM8Ise/Tl/NHL/4+\nixCpLkELVqSKJ4YNjREm5uG5ycWIgj1qOd5csxN2lAK8d/OlAAMG0EJ7jG5n\n0XA6fk3Hr7Eni01NwmbX983rTsPpfydUMfv9bk7OZvvBLzLCyIjEWqD2coeY\nuZXhHb7BaT4J092s0+7kIo6GCxW3fHgP8+gTWKnvNp5q1aof1HKEN2kw2ftr\nJbHJzEzQgNvzSJRwhaYlgLZ+SGvTzXGnqHtGzX/3Chr6RTlyroh69iP6u/Ug\nRRkAlE48KvanO8ULcR9awgVSXx1X9XtRk9ytuVXKt5GmrZy75vs7NwaGjT4/\nvp21Ht7UoUC55kgJFve2f8hfYSwrAY6sxUWC28feRxcv/UzQSSdKgHVBtDAS\nrxd4aX+5IOcP/ILRcb7Foc4rNQxMVjGvHhJMKP++EW6Zzs2GZDcgHD4YhNNZ\nw2HxD6ftXIzdvT/la7a1i1rSuPrrQB9nsadq1V5y8KQcZQ6O8xhIq3iXfNLV\nrnlZ\r\n=Ok4n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGypSXJp8HhcjGM7uuHeL/lwS1FQiDe2v4WC+537J+1fAiEA2uKkwuU2VxApR5JWUKlOb5y0LEc8ZoctGqdthz1dbJ0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.fd44be19.0_1593668934661_0.027560340854415832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.17.2":{"name":"@material/mwc-tab-bar","version":"0.17.2","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.17.2","@material/mwc-tab":"^0.17.2","@material/mwc-tab-scroller":"^0.17.2","@material/tab":"=8.0.0-canary.a78ceb112.0","@material/tab-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ca6fc6de0c0461ca30684d96cbb98b8885c8cc6d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.17.2","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-QsHOmxj6FM7jKYM9Dt6u7jKQv8r13z7/ryocQAAqyd13+LwAc+ec2o0hE6lTFpqNPAdlIhosip5Y3GDHdoKT5w==","shasum":"d89a290d4dda5f854ee51a539b69020c6634d1db","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.17.2.tgz","fileCount":16,"unpackedSize":54082,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XeHCRA9TVsSAnZWagAAvj8P/iEYxg45JZVJPm56T79F\neqlB1F0PchKsegRbktric/sSedRCu/YZMyBIgyUc5YaA5daZHUhVfoaG+VBc\n5pSKoqCZbHKDjkQOL/N4qwByyIf4r2znh0JkuQhN+el8SYW4m1OGeCeByAYV\nRiTKH9o0NtbvcocMD5ww/N0n4I5promnLr+IjsldN28psZE0AaNLUr9VP3mA\nO/ewQgmF3CCxf93rWYawWguYhDqjd3GWvU43cEWvyMqZiBBD2iu7yuJzjU9v\nfImdIPaa740O+AiVEyKVWMESxKPIDSxKBVOBoHKHGGMO0OnTHuCM4f36aase\nm4kEqkCdn8hE1WDD/Biegi5IEYLzOfpYz03lvEfAFqodGysdFhERcZ8J4MrR\nn0B6OTi6WjcWaXBE9puvQ1lv+QhV4I7Y2keWtnKWdPxuEIpfM1sxvRGB5BRA\nCQZHiNhZnl8oWqQTvE6SIeW1zr/A6z7hchaLDaGspjfbiYaY8Yzf4T2M0PG8\nTpKMvgjJxfmZWOhr89tKmxToVe9PQysxe1vu4mYnjPiL09IYRxq4Bmuf/iWM\noNKjykryPd/H8kITQ99rKfr/vdYkpHukG+xs62yCC754F+JhNXQdKEeJtp8W\njSMgtwvOt5M39gpa3/+aXrrYYfluannQF4GTpJuhoVAy1DfyV8ZgqvG5VdcU\nrBln\r\n=wPcM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDoP6uXT+WzCMYKJJZQe0ATBgbV5Mu06w/Hg8XlfH7jaQIgBCXU71nqj6+AESt7U0577ftWsuiA2AlLD6WjeZuQ3XQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-bar_0.17.2_1593669511191_0.9240857687766004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ca6fc6de.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.ca6fc6de.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ca6fc6de.0","@material/mwc-tab":"0.18.0-canary.ca6fc6de.0","@material/mwc-tab-scroller":"0.18.0-canary.ca6fc6de.0","@material/tab":"=8.0.0-canary.a78ceb112.0","@material/tab-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ff7df8fd7df07e908061e32938ae550315d255d5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ff7df8fd7df07e908061e32938ae550315d255d5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.ca6fc6de.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-MvqbythoNnzUGno7+YtnU9WX/q5xEfYnf0IMuYZzPjTuemS3d9emomiGYv2MQ+ilI7UjeVJpWFsmyVcbp3s4OA==","shasum":"07996a9371b583742c67bcc89d605247ac1eda1a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.ca6fc6de.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/XfQCRA9TVsSAnZWagAAfjMP/2gjp/Ovy37atXO1h7sP\ngaA9yR5xB0lQovvHXRBeGyNOP5/FkE8zR28IFKrMzbVioA9f3ILfWJUsdzbk\nWAkGD7voYNeVayTH8vULAe7O7urKT4197XZqoEB6+hnFapRdi7Th8iwsmaCl\nlA1/ui+/i4oz15QXnvArIA2s9weoBxWE8ap8u1qzml9wDK1JLcHv+bKbAEbn\njN2broAHm2lRT/BMwxjiVpu5lEPUHXvuwvNWjLZnFY7Y2CfoEtC2BcNaabXs\nfG5TWOvGBgdLtFQw5JSvsI9I8d1+9FY6Gl+kcRGx4mul5gWh0dPZDIqf4IKN\n9ApZdy/Px7mAI43c50/BRLtg1wFzu+y/2bYwKBfsMuc7RnPSJn7mxMS177BI\nvhtbqgcm8zKZekq7tTg+sGbfOzm62uqo63gQYx1UEbVqQ+0qxMOMl/vrRcYj\n63NHL0I4qCG+PYpQuDzo9g/iC2WnyVDmhx9B8yPjmDQr9aS0OffzO+S6DO6F\nGBgvO95DRJgVTnvLilbSlsqDfxG1/aRNRNvXQ60xTlu/+OilLQ6IvYDm/rbK\nOYlf19bGGdqZpoayMCSBOnBrEpYlpXkzNjtsPDBubVGsPSdqcsPt0abRlZKl\n81uMdlXUOoYllcBnBmS42BdoPniickIGT45hj2vmitnmj+WCEYsurIJiWxnj\nLfrw\r\n=XuTY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3PQO8JyAi4FGXSopa1Q4Xi0F9zEorb0wy2t2uWGpByAIhAO/VlwK2/uUr9zCAaaFurWZ1bc9TlTHDWa+o3I0GUnV5"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.ca6fc6de.0_1593669584250_0.7298586165064298"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.79f1ec2a.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.79f1ec2a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.79f1ec2a.0","@material/mwc-tab":"0.18.0-canary.79f1ec2a.0","@material/mwc-tab-scroller":"0.18.0-canary.79f1ec2a.0","@material/tab":"=8.0.0-canary.a78ceb112.0","@material/tab-bar":"=8.0.0-canary.a78ceb112.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"28823685e1aac950044fe1d868c6233ae753ba7c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28823685e1aac950044fe1d868c6233ae753ba7c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.79f1ec2a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-TvX71VigFECgL2kouQ03YIsw/Uk5/BwNGbbsbBczp8SQ7ni3gP6Algk8lfjJMX0likCMKB+6XF38h6gS5aXTig==","shasum":"2972b3b3ef050efbf14e8735b0688257fc171b39","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.79f1ec2a.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBLHPCRA9TVsSAnZWagAA9TkP/34xyjUxGjEQE2Ho4SWn\nNJZeDncGE08pZ7e7rOlnM2gTVdH0XuywoAXASR2L+5YRdAuBEtLM31sLWivd\n2MAmBzlm4L6pYdwlxuQI60kIPY0eEBlhZAUwpEzWZv2ikwqpJVyPFbOzkQ4N\nCZafMUuO7jNeHesfFxJ3L3fp95aFcgcPTJPSPi5YTenqu9waLD/+HWKkk4PS\ng2Ah5Zs9/q3wsq5CrTKed/BYD75K5zb8e/sz93QN+1POhL1+BuAOQadY4fRW\n8ylKuouBcuauY2C0yDRbaVt7Lxw0nCuIJWAum91wSsR6u3tMYied0LDEoGyy\nVVW+GDmGZSS3Vedhgwlt1QBScMjeLQFGjT+7Circ7fmYTs6rO5zUlqCTrYkD\nxzP/Fmt71MvGSJvVx/gY8G2+QqCfSwRt+4Kz/Py9ovhGIVsBzvXfH/LyjKxq\nu418fkhUySTeHiwO+KF95n9+IlvcfsKziAqsqQmP24hJc/w0HXMT8mVJbktt\nbOpg3ZUHHRS6GyMgNnbZOV3Yyl6PjIvxKp+fcnAkwoeM2UF99WDfY2HZdkNE\nscR4wKa6TL8JncNjDnc8aeCx1BsctZqo/0+tr7GDuvYmtcJgB1g/yDlTEIDm\nRCFyAjOiTH0xALDFASEQwYOX3PeFsXd6Z2+cnZwqZvmax4Si6f85XUElW0k0\nYMj0\r\n=rM9M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+MnNjEKi67qiW5JT9hRH58VR75EyKTvGcK15INAo9qQIhALJV7zRFh+CzAWXBjDaMKX3OjBh52DAaVKNrBUMzvOZ9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.79f1ec2a.0_1594143183038_0.3276321824588484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.a7bc45ae.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.a7bc45ae.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.a7bc45ae.0","@material/mwc-tab":"0.18.0-canary.a7bc45ae.0","@material/mwc-tab-scroller":"0.18.0-canary.a7bc45ae.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"fe14f2ba9c3850967039fb923e6ca39978290d3b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe14f2ba9c3850967039fb923e6ca39978290d3b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.a7bc45ae.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-fuY5fM63QS8HhEBiVfG1/XfipaenlKSz6CUqGIiqJXIkSAW+VAztScgJdHIP0V07ybf1Poke+ZatV+a/ApgOzA==","shasum":"fa7ae2b5403fcd05a844535127636689b974718e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.a7bc45ae.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1KdCRA9TVsSAnZWagAAH4EQAI6ttaJDCWfdCcpH5cay\nI5XUQPV6S3r3t9jFBPydLG4g8eCIXitp+2dV3T0xvc20u+7Z4cKzOCBzTnZS\nFzZM7RPwDNdR3h4XdftUvr62uEaBJxePCiRqMAptyabnBsWdnortNeT08WSi\nxNkTpLNzlbKvWY0zoQ0lp22Jr0vn/OSekDHcv4YfeaKmY6l09D66eO5ymYAG\n9Nz+SWFgCVwNljst/uwUKnUODl2dI0yuB+VdE8eymGDlxFHRMi6l8WBEa83Y\ni/xXbMvKEBxTsBnPtESsFp9m5F6HNnfW4zbPOY1BUIcL7UUUIq3OPwROZIuQ\nGK+fq4eTFJPsaVuUg9YXO04Rb8pn+JXOATZ36dG9u3KPqo0c1u+R6m19auXk\ntFB5nYZrxkEEpmtfaf8L/m+8zPKRkp1L+/FRKRgAiQgAJbYvNC71c08jtJK3\npcG8MbnOsjCICDlIeQWUwE+Y5F4b/v7jjnrQ3zTz3bMYg1EFqQEoWeuDBCLj\nIrwU9GU/jkXzGsH66hVnr2pwWEyZzrW/NlJy+x5dRO59GHMQuTkwDEjKMVpC\nieC/TgUJsyavFvYVywYBR/hYkbenvWVOR8bigRw4BXPaGQWk1+m0BVKRiRWy\nu4Ahl4WUi5qkT7qv22v9q+O+Kta0+mRciH04OfFhlXqyXgzdy3FLXjsmor9o\nq4uU\r\n=SlCV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEQVcAX6dkkuSU6CCdzoVyfHd5brFKFlyyGXmIF8nGxAiEA7/hwDwwtlg/PQ8o4TgGIysiWumxJV3yQYyLRqHIybDo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.a7bc45ae.0_1594315421113_0.7143084046605006"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b184bc1c.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.b184bc1c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b184bc1c.0","@material/mwc-tab":"0.18.0-canary.b184bc1c.0","@material/mwc-tab-scroller":"0.18.0-canary.b184bc1c.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ed045f87cb3f1a4ba70a20cb1f586b80a1aa928d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.b184bc1c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-owZS6muPu5dCMDwfxssBERMIjy2rKM+EgIRjbXKpZpr3Mdfppjub7sbF/KBQojss11GPkfUyvVh1ROWdO/PCew==","shasum":"1935685783ffef4fb96574a06712fe0274251fb9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.b184bc1c.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1TDCRA9TVsSAnZWagAA//oQAIcmX+3ZLLVqzp1/flrO\nevbPp0pzOJmUzdy77P+H13LnJA4OldX0gcheJaf6PzOGB+SuNEmMCb9sQvyg\nXsjy0W3G8IZUCHSRlCxl1xuXgAzWi5P/y8BUX7XHaNME2pLPWpk2y9WDiJpg\nU8UlQAbUtR/pmlH6j/1p60E1E1rqBqTxVLiPfUluWP9UlkmWXYhRCVT9HN7t\nenB2csbHImNBIwInm6KYMBt8E462relWHYX5YatUDR9PXEzDOGFTBUDu+81Y\nuxB5G6ctFfeLbH4TwSl3UnLbz6hrQPn46IqEFmDbabw8W8464Qac3Rf09uT6\nolrh65XR89swiA1Rxq7XZ4PwsqWi7U0Qd3aUw5C59B3JrlEWERgIhB8TrIqT\nFRmxTJH3t9Bg5Fg1anvktJizzI5fbGq4IraX3YnHq7PE9c1X05jIZAswIG6U\nbG2XEJlTtuMJPO2U6PJ3OZCG5NRF3RI0YotL5qZGthuiOtRihlCMKiw8kBmp\nqQzd8SJeYs+g11X1MCOU0ImDMuol4p+hzg80yHP2+FF2Pagn9fdKX4bFpTnw\nkUDa2wImW1GkaykTXr1liSIhb5LTZKrokhiMz2fTgizdgeMLEGbYJ9maQUyy\nUyANczD80Q598YU0wOHMQ6WLVpmT7RB/LRuJJ1R53QqadsSdQrMWbxHoPMPJ\nSDoY\r\n=aX1v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtBnLX3d/fOlqpOikPqRHRxYqlyW+J/bLZLYnSfuoEVwIhAPQQUzJ+BTjlxNLTanRrG7U7rF4A26P3HMYnql8thCJE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.b184bc1c.0_1594315970854_0.6521366098011403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b39fde62.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.b39fde62.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b39fde62.0","@material/mwc-tab":"0.18.0-canary.b39fde62.0","@material/mwc-tab-scroller":"0.18.0-canary.b39fde62.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"561ab4c73d80c73f9b95c39655b7057d622fa2ee","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/561ab4c73d80c73f9b95c39655b7057d622fa2ee/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.b39fde62.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-VKQEq3PY6FkchgGezXjtrO0MHow2imeixkH00SoSP9v9GZ403LZ1B8WeKPInqdr8OeXr2rUoNyqjakYR0ICSOA==","shasum":"0b8597e23b72335d49d1408c336d64242f6ad5e6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.b39fde62.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1X8CRA9TVsSAnZWagAAk4YP/RoZVbXM0dhfgPDWtV/A\nVWTKUwUXhiCCb1n/xUSDFKMAa2nZZiTWduNbQvIT3zLd+uEd5OGzibI1WFYv\nwTzbaC9INxO5nMDQo4XR2eDlZzNoTMtFgchmLadKVnSZoIqPeRuiBeXGrdek\nOKM0YoPSkDu7IexQD26cxbGk9CF2R2NUqZciwxIp9y1ooxqU1i7i7wFtnDRN\n0x8SV8MiRTJcKA2zNoereUa2zn9U4/dtr2L9L5bfW2bm0FE/EnnhsB0Qk/2H\nVCfMjpryjHlT2+dDSOr/YlxTZAKDZMqL5aJUeBqKtduId3Xl/ZmmY6246mvJ\ndFkOpeFcoyHgeWgbYWtZ6F4MoYOZgdnNrE8G7yKo16MJ+AcZOOyIu4nPOkCW\nPpxDGYvkeK9q3+x7vucbkPrCytAXLcsVn/9qVlDRWw5A86+Dn5NggHZlNx5i\nwe6A8VuaP4CgMzYaXLKj5+V0X6/neftClYnuetUNRn4RMij3jZ3TMOosScz+\nKEqUyeoGpjzYi9cxiId4Qml1DDz7iwB+QsMBanC7eZuun1jbjyVObSjutAKC\n/keYeCzjzk5eyCuFsZjK/nr2B2JkFrzMgWKdJUs1tO0xV49ygClr/sNDvgTc\nX63u335lZOa7eQAKki/k9rL9Nrl8cdlNSWkX8Ade0kCHNsJSPsmpoHM7Utet\nwQ8F\r\n=LPv6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXIGWT9aTKCUB5vTiDirb/5ZNCg7Qb6lmdgOVYW/WS7wIgDJaPdWlYesTXNrZluCVoAVYJilmuQEz8a1yxQduwlkk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.b39fde62.0_1594316284233_0.039751242821497224"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.dfdd8d6c.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.dfdd8d6c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.dfdd8d6c.0","@material/mwc-tab":"0.18.0-canary.dfdd8d6c.0","@material/mwc-tab-scroller":"0.18.0-canary.dfdd8d6c.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f0aaeb4b52155318bdfca32a9cd375c7cf8b0ca0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.dfdd8d6c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-nM1JRB+iPVkXQ0DhsfsclELTlBt76k8xiutlRVeO5AL3C/tZDjUWe59HRA+At6189PHDwJHHcG0S5KuVFp9FZw==","shasum":"427b3b5233541cd8127f450a8109d392250baa86","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.dfdd8d6c.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2FCCRA9TVsSAnZWagAAYzUQAIVM9ZpilBuX5yF3tWOi\nYcBgL+piwC4zd9O1uqFeYgjD7ZoLWsQ0W5QxJKy2GDcnJ8V4RakPc8bJPr48\nOG8XsWyPCD0nAiMM3lMY0O8h12TgBr0Y89hdq+Sf/5gdQ/To0j9g2LDVO+mL\nXA66dDQC+gnJhExBixhPDZ9T0gs2Qs3iBfs8Lt2BnfNFT25hbEA/MGFTtfjk\n5QxPfbJyR3t/NJnkl555o3nWDf4ABdX2FT92qPOzVIof2AnGV5ZG47IYNDlG\nu4rkYgTXaIBnlt65JYhUPkYKKxqD7y944c+DFn5vHl4SafXXsACZYHaMSaMS\n48rphQ7W5j+wK6D6Q0wxjnUmufdq2vi2VavnsLhcDMro8oudOAAOnmD12Nc4\nm3hCORst6TZLd20BmpdB+6Pdba8EJuXuT2t3ZQ0i89L5zERfjT69jb4Rmezp\n3lpEzndlilcfhY5+ZZJ1q5lQ+iatUmvfRgskP5twfTMJsOQvjp3lvMX50gX/\nhcnAhXWgq3CuWfNkRyuO1mqsQS99db6a61C1i7yuFZ62IkGCMR9yOfL5nCoq\nkiWG6pZ8TlUyJEXaIs6ada2Y0EkLGTw5rIkNwYEvClI2Z1QtpydkE/gbYKCL\n72EBDQ4pvnwlhWZ9qRzcp8bazKqhwtxiNNxviVFm3ZHz9XgaWn2Fl/T0l1WA\njs72\r\n=W5Ir\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC72v88zDHF4QIf4M1IkE7Wwt6HN3u0RZZ7Hw65Y/B8IwIhAMSQlz0HwGfLA12mkMJ9dqGN8ttX6crFQqs9BlAkBQp9"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.dfdd8d6c.0_1594319169944_0.12228917634550518"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.11cf2694.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.11cf2694.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.11cf2694.0","@material/mwc-tab":"0.18.0-canary.11cf2694.0","@material/mwc-tab-scroller":"0.18.0-canary.11cf2694.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"652e6b8d96cc6adfa62d59e09d264defbb4f259b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652e6b8d96cc6adfa62d59e09d264defbb4f259b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.11cf2694.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-mOjwsScB/x6KkfB3d9PwUYQTF+ASnjh2bU0aKNLWffb0uNWl31aoNRLHh1iP0hEwOOn6cWZwzmlIGmJXYKYxaw==","shasum":"facdb9639d869b7ea25f660c57bcf3315ed98a5d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.11cf2694.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4GMCRA9TVsSAnZWagAAjY0QAJ6JdWslg2azWah//A4f\n5c9b9KIci7bbxMAxrDb20UvaQTj9pEudrv4n8hqoqyT/08Mqo/l+sp5mlyBS\nz4to/uO5qJCRgvsVet2yyJBPhKHlMj6+4kXtBp5Ocp3t+1wZZdH84XfsDget\nkhyADcC28p8mWl635ChY5INOuMrsdrJca+8wXvNUKCggrGt4dPUmawElocb5\npRZGCDkhc2R8ibGYDl3GqpETmO6umFT6MJE1TBI7HJCngVLcEJJlPAag2ACn\nWuMYubXm/49aKqvrAiSOIcg80R4B4p1/H8VJnRJfK0Pnc33x2HKNWaKG8WVc\nFXHKnOC6sVJER6taDr2LAzaZlyFK+oKct+17kX1Up3toKyWUekIelOdZ0HMO\n968t6brqeGcCOwsKJMcAcpQbKyQhtpM2mOwYq39ATwfuSg2evd5vqoLZwTuL\nWoik+fLuyRuEpvY5tM2SHP23BqYXqm2yH4dASQ9WmGhLM3eWfHg0tMzMhNCr\nZEFhSfhcbiHIe6cAz5iTyMCODAPAektdrwRXDYdh4C++mLwE7LUSNHtz3AjN\nEKseNNV2g2ueCAtTrjouJ+jPrJG079UMOP45uN/pPzdOaVJHr5RVGs6lRgUC\nVIE2g7U+eQhnDv8LPB7lJ3xjduPhMQg5wBTVzPLcbB+B3QBMVG3orArfm4FY\nzUsE\r\n=wpx6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDNfOTSayw55zEMIHTwZFz/2uDTkyACF1ZV2/lycUqEfAiEApZl8ZIO0wHPe7hzO23zuAgACx647SRS+1j3+fYzIWw4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.11cf2694.0_1594327435479_0.730603135474742"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.436d66e9.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.436d66e9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.436d66e9.0","@material/mwc-tab":"0.18.0-canary.436d66e9.0","@material/mwc-tab-scroller":"0.18.0-canary.436d66e9.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"95b44ecddb7a4ad5662751540e79c58656790fa9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/95b44ecddb7a4ad5662751540e79c58656790fa9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.436d66e9.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-9vu4iL4p/c2Vc21BEangeHzo/1kK6cxEtPCQXHyjSV0cquuV1b7PiPEcSHxe0qkg2h1dmxc02KEiltpSOsb+Xg==","shasum":"e66ab735d31e1831821ffeec457f238fcdbf1324","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.436d66e9.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4KqCRA9TVsSAnZWagAA51kP/RKnH2HG5TlwGFq0ZVXT\nk7G8f7w2HqWJ8/i8UpOVkqo1OfTcx4fRJ3og+cryU1hXM20zgbbGRWYQQ7aZ\nm8xKnFoljL1Lx18Bw0yK42G6x39qx+6ggyrvtDDT/++LzE1F99tBbPSG9Uug\nmeC01wUHxqmt/8Rv5UCVQLB0XO6dTNAHh2BQ/3Y4wWxNoDl/YuLVS6aFYHAi\ni/e0WfU0RiAlI9OH/j59DuAXsv5qVn2GQ63Q0Y53TuJy/+tEJYjdW04MATYB\nsnedvwyJBmeuISaNZxzA6ftBbSNIGQZ1cQgC68a1uWAQxRhvxuvrWXv1Ws9H\nHBBLWr8A8tx3kIxTTDIstEmq14isTv0KdsF0hBek0JvW63VNywTQc0iMJt+y\nYQ2hjwDKC0/1e5wcPbRzN8v16tXIzxnGu3l4pBymwJ0XD0JaJR9Md4TltrcY\nfAfb9CNTGH82hA/4P6oI8NxgujCCurr2SthdeckEo2UjqViYmmvRBorn1xEy\nOH/aXGGDvcz45RBWa6KQ777EkqwE3Vq94cgTyauQRefp85XqxdXYWSuLAzyL\ntgfd/db6HFIs5bEU+SYJiO5lzWt7XuIM5sVb3W3E4DZNGQc5JVQBK6u3Q10q\n69tmtGOvYubiyEewzvoQUeS2mF1crhtkATc5QfVz38tNjDSpiaoIyXS4n3fk\ne0If\r\n=dfsn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFOi3lJmxL8QQ9YljNlJY6UNV8yUItA7YdKPpK/fzUHxAiA+SBnk0ZAq9Fj/B/HTLmzHHSd3YGULHe80iE/4lsYSxQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.436d66e9.0_1594327722357_0.7866262851223671"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3a44d36b.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.3a44d36b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3a44d36b.0","@material/mwc-tab":"0.18.0-canary.3a44d36b.0","@material/mwc-tab-scroller":"0.18.0-canary.3a44d36b.0","@material/tab":"=8.0.0-canary.6ed717ddd.0","@material/tab-bar":"=8.0.0-canary.6ed717ddd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2cc46bce7534ef7046c58891f32fd054a1fa8b3f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2cc46bce7534ef7046c58891f32fd054a1fa8b3f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.3a44d36b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-CiP6/mXvUl0eh2O7jExg3tXlIQi2O5A3wEriBgcx0lLq5RmJR8wbfgP6b+tj6gEZy3eoPzFFGloeexSA2Yd0LQ==","shasum":"a9cf479c7ef779f34b6d9c2b486b823a82ae4783","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.3a44d36b.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB7haCRA9TVsSAnZWagAAEYEP/iJNl+GrauYtDOfN9dGm\nuyrjUfyc/Acc0Vd1+BI1jZg3CykxtMJEtSAkDJXOA7yhV9hmmS6ZM5ow+pYd\nNjhceZe9ZduruUuK8fHD0R4BUObdEzEGvtMPks5R04eCqiaLl6aD5T4/2LKb\nOptRT9wkPJOt/03zgW1eixBHc4RuvMMEbrFaz3eMukVBO+FX9wO4IHOiKoYS\nQ7CTCWRJCnBcrA64OK6UBdwSBoM40RvHaPhLWZJzz+ppOtmjj5YnjaxnR9i5\n9RegB0/DN96R/+xeaI4+oLSzuZhOWQom0jT3WZ1JZLIfrRC9x2hvt4R1j52Z\nec5NJjQcghw7rCmK8pgunHVGHykz7Ln7z7uqEFxx4cEiTHVEF2bd4kNAJ/Ms\n9cGWcFnQRzPzwnt50lkuqvPU5oe3gThXYBU2sImwQZ2Lnhx4wzI89uBGgn+U\nqsWWXBhOMHSpwr1XVglJ9TkB3zUrWrAMR4dMOYvr0JNfxOvqp85d5GdkOH/+\njN4fqd5rcGiQURbMBjNfi0XPZb+YPtrAL/HWwwkpN6TR6KU9nwqniuzcjhF4\nNLaKmMlBK525fUG09gcvhz1UrxVHzaK9Jxa+iSOsogA6zGC574McnKeadzqO\nOTuu0rc1V0NjJIHW74N6zFiZmPqeivAphyMJ9cLwKmE0eAINsF66RIU3U7DQ\nOY9Y\r\n=a6qz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB1nG27sy0bGDkHGbgswuP1Q25gC6GucbBTH9cljyPSNAiEAvDUEu//ChdU5Ckg0ZO0EXsu62cSM+6HlUsZeQSUpfmo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.3a44d36b.0_1594341466051_0.08721736873382868"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ec11ae6e.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.ec11ae6e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ec11ae6e.0","@material/mwc-tab":"0.18.0-canary.ec11ae6e.0","@material/mwc-tab-scroller":"0.18.0-canary.ec11ae6e.0","@material/tab":"=8.0.0-canary.1e7cb6198.0","@material/tab-bar":"=8.0.0-canary.1e7cb6198.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e68c3fdbbceeb46e346d694dad4b236fc74713cf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e68c3fdbbceeb46e346d694dad4b236fc74713cf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.ec11ae6e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dihJdpizm1Y2Osv/iDrvH69gbTm6RZm1445ORadq8ORkmtE8zpSyGASSKOlfy/Mml1ud0AAW/LbtDIRRXuH0Yw==","shasum":"a33291ebe72d1753526d19abbde1d32d198d1239","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.ec11ae6e.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKsZCRA9TVsSAnZWagAAS/gP/1ZcMUSocBxOea9+g1vm\nW8tNIsS7VWBql29618Te/huQN+FT5KbHtguv+8NYaRfUFHZCaRrsYn4LqqBb\n5gAbvtKbeVlf5+FCpUY71L9PLjl6scBwwEsalKZkL8nPqstVH8a7egiCIcGc\nubY1+jSHAOmV1PoXU/1maUpknMcgbnwq2K+4OFOIO4RdtzS/pf2+0IJdZm8o\njd9M4fGV08EjluJaW0sFDWjIb/PpttuQB2/LPa2ERPJygt/GdIWtSKoyWw28\nWRFej+GnGFpOzDMQas3pYo8pf/Be/0j3iJSypPIUeRy5zPL1M/EGeh5tXiQw\nAM45bk5o6ut3yN0rc4b39chSnRZu87boh8+vvxx/qFdw6S1F3KCqdbD4t4Vu\nR9A1dT/rCK1IGzcNTg11Onrl+QgvGb5yb9ycAKAC+Rk7n/pei9HQuX/RZAvO\nckso/V2PsMWZyoccb8JVLZD2EhRYflj7GgKA/mc8K86IySDPadJqz0K3q60c\nD3X5Yvw+u6y+eRyOEeVouZTCev8mE+tE8ibtgI7kr4fnNKGlR+fq/EITCsqy\nVsxr6tLyKx+285x6N0fmFziArsYz7vNx2aB5izoHm8X1VzxMv33NuMdtTbha\nwHTP60zo6vNx6cSEfEaex6YWOwa0bc95nIJE5PvPpnFt+bn7mNWKCIFqn1sa\n457k\r\n=Msnw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAKdMpqc7g283MTJgUl3Y+tKCkqxVjpuKUL6bFfk4s5bAiEA4ysMK9UxZhQ6T+2Gf9yBfo9tzDvkcD7d1J/fw4qbYfM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.ec11ae6e.0_1594403608556_0.9483678924183345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.17f6cf27.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.17f6cf27.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.17f6cf27.0","@material/mwc-tab":"0.18.0-canary.17f6cf27.0","@material/mwc-tab-scroller":"0.18.0-canary.17f6cf27.0","@material/tab":"=8.0.0-canary.b2edaeead.0","@material/tab-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"a622acf92b818bebef7c3f77eb5296521068d267","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a622acf92b818bebef7c3f77eb5296521068d267/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.17f6cf27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-13VVzGgQw9i5MmPkeqTz2bS/TLAezL6xrAN/8h2ser5f4/WTsnUALcPdzQzSUDTxWijlQX0BPYyrhvRLyz6CiA==","shasum":"e6c13dfb67a188a94eede1160d0d2273632fdf69","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.17f6cf27.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLRoCRA9TVsSAnZWagAAnokQAIXOmxKfIRX8O8RzkOLM\nYolU0a5N0dOxNk0lrVVGYAyyp5tjjbIw+KMlmFx5eboI71K5oAzO7Qw5Veii\nVCfETPWpZxQ9f32jpzCWA9djflydQ0uzhspOCMtXNwX9rzsex0ict3MBdzTQ\niO2pncv0I9acgCz59CxTMG6TNdO8Yjjd+rtsCLXV2JM7LqTVk1xrC1seF4MC\nPsKit/N6M/WWOeLcqYddTkdIlhHw8NkWaiBH66CCpW4zLMzoskRzTphGc7ty\nULoR0mic2z0Ayi1q2RzM7T2eE8n+kAwqr2MNaBNTGVtxlW/XoCj536pSYOnV\nIGuUqbmthl1AMvDTUoHsfRshUcaNUs6l6KMAovrUPUfjQOy24XIuSltJ728W\nwHOThK6PNDKLKuioUiq/xXQBQ4p6DDBl1l3S6AWlL0GaeSmBssanUTjO3LV6\nPTLO+X4f73Xv3wR29kYuCID4u8ZCQKZJxvkd0E3b8kN4jlbGjgTB+HHP2qjq\nQlu1WvX21qmHtoQNi5873LxUclrMWmA8WmnYP36jvdg/V+yS8TrpXeWtdoDp\nB42E8HC0QmRxj6+MeTurZ2EbLkvnEMywPKey1xt1/7eoLyy86uDXIseSd+Pb\nA9vBu9hV+ABrbifpAGZN0/baxwnhfu4Nxad+EG6kFPJrdIcubDQU2iu3fTsP\nulSl\r\n=pv0j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGMEJvBbL9a7tNkcUp8KEKk6836VzEHxdmMWDoGptx4kAiEAg4MG6Kbt/Ct68s7OzzldzRhSBL3vc4HbLTAC1ASefjs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.17f6cf27.0_1594405991937_0.2285623896679716"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.efdfbc21.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.efdfbc21.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.efdfbc21.0","@material/mwc-tab":"0.18.0-canary.efdfbc21.0","@material/mwc-tab-scroller":"0.18.0-canary.efdfbc21.0","@material/tab":"=8.0.0-canary.b2edaeead.0","@material/tab-bar":"=8.0.0-canary.b2edaeead.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"d0c5bf147bc31e55a775562b113790bac6052eed","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0c5bf147bc31e55a775562b113790bac6052eed/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.efdfbc21.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-/8WLJYJEAMsEHlVdkXeA0+yM5Gt4v2Whl0Y+C4FHN4mWKvyH6422bFLH9Gkdnclve9LaGo7V4qiTGemm+Bt04Q==","shasum":"f45140d74d0259155a9909027d7ed650a712569e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.efdfbc21.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCLcsCRA9TVsSAnZWagAAhE0P/0fcREc6A9qfHIhGNK1B\nlwnj/NyHNEeXXDa394MQYyQx7fh9yVCcHIYganhm/14NkZN/LqRHA9YcDgbr\nwOig6XysHEyvqBxWygxSgeRyDJqeBPB5w95Uz0fDhdsvgkXRbfDM2HIunXgv\nmL9x/ev0yb6z0KoIN7/LztNkTAU1GlHzhguyLCEgLkdx/UFsI0a5nohMgl2f\nakFFofx7UNdm8uXGNAl9yeSQOdl4uDNJo78UpUOBmoJxJLG/quTdhngT0Ndz\nIYRbf4seqfXlGbd6QKBF5U5x21asmCMiZX4UAQTzeETyzeJHWBW89rkE4F0J\n4Z2vLfCcs2zpBU2TIA4v3D8OGNVq3NFuIM9fBMaPrZuKb3gw+FerWlX+l7hH\nse4o576ooMdnuy37gbtvv4sa9hxHCyhKLgnJhLzldv7jTuA6mftdkq6yZ+L+\nncdQIzyhF39CbP0OcCQwenGItiNDR5oMpSiAmDcO16GIHGOHtUCHGHSj0P7K\nBucqB58/P215A99Q1RBkLZ6djVTryIXCOOkGyQJpqXq9ctwKXMAdq8BaeOuq\n1HDjY+1QS0oplTm1QcomSFZ0EnRRz93rx3qFPCk5yWmO7jyVbUcdMVHAjiVm\ng8OfzEhQGwTaqRJy4pwx/hno0gndoK9APvevQcUY8f2J2GcX9re4tCiPwmVS\nJHa1\r\n=9Ybt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC8sExpylqV0hE0AKuOgltwAKhO271NeTS1aoYffsohXAiEAkeDONbfkRHznez4E8/Z/sS8+yoySMtw+05T2wDNNRZI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.efdfbc21.0_1594406699889_0.18949229272046253"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.bae4339a.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.bae4339a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.bae4339a.0","@material/mwc-tab":"0.18.0-canary.bae4339a.0","@material/mwc-tab-scroller":"0.18.0-canary.bae4339a.0","@material/tab":"=8.0.0-canary.5dac1f624.0","@material/tab-bar":"=8.0.0-canary.5dac1f624.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3b615d0a523f0cb1bc5f7f0c0f7ca6eb5f52ee63/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.bae4339a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-E+JTG30Zo7zYl4+7DQSMgjFe8I8ZO9q0OhuK3bLxDUHypJ8TwQDnRX57jj9ym7MrtBjPfw3f/ncqYr4Tbu8clA==","shasum":"73e8556d587615f3c0fa28d3a5a4b9d9280eee0c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.bae4339a.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDeBvCRA9TVsSAnZWagAAdTAP/18qf9vGp6tsxjwIwnZt\nYIU5ZouzTIc9D29SCMfdlKPx3yffsgK31rhLnYBAOcEUvtjwYSnedYIFecE3\nscgPaFut+IOKuZXoJxewX3lI+JeZtrHJts3Xt1T4tFtGCjwtkuKs8W62EnLc\nYLTso+X3GbMT1bC0a7YQtPZXwJEVER/fA6L/9Ht6LDr9tTUTOd5c52cFjyeT\nN8TIEPI0MKWjykl7jCB9LQbED0lFd/Jzrpt6HfQHhHFUcdpkvAwPbX6AVGKv\nLAtpvimfe7ZJDh4wdJEgGOckZ4j9c3DCR+Uty5ui5kGFkXVu88p0F78tJHxv\net6q3Ner4zI2bStlUEF2rJfrfAIKMdLHnJa2iCutK7td42EeyGvLdY3aWk6N\nEBTePW82Z29LaozDDRQ0SuCM9RjcOusCeexZXEsvSxzVpo+fbCNvKtNp/HTN\naiR8vDz6rV4omvIcwVoeIIgChYduMhOb71yMEzh6cziIKnS+63g7w2AjlMLb\n+LSn9+a6whlhonMVlTuenUjrjLJiWo7rEKPytJCsv1XuN2K+JICVnu89EfuT\n3WAFXEC0XZpMgdsgis2fLwVYC7sDyAiMRbm41dTOcn9zRAgez2OaBJsfPOK0\nczfW7lAgPewL/tH3myPEhsMEill3K3fBZ/LUkIZzLyfbJX7S6YulQX/MCsHj\nCOVG\r\n=FHYt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA6iN7ADfJoNqjapt4vyIbN7tLNf5eWNESMto2puv7zkAiAQupb+gAnvhBMJ8sPvDTUnHwtOUGkTaTSB+mp/fepsCw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.bae4339a.0_1594744943295_0.6054425315406005"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.28eac13b.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.28eac13b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.28eac13b.0","@material/mwc-tab":"0.18.0-canary.28eac13b.0","@material/mwc-tab-scroller":"0.18.0-canary.28eac13b.0","@material/tab":"=8.0.0-canary.e6e23019d.0","@material/tab-bar":"=8.0.0-canary.e6e23019d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"26d5b26372c667630c62d9894c9825aec9e06f60","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/26d5b26372c667630c62d9894c9825aec9e06f60/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.28eac13b.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-QD2Vch3ygy75ywUowNHJ1tiwl6JRla0YsTDaash9qbUzNQX2YiOK/YolIhIc6ETZT253DNYr0g0Cyu+373F9Uw==","shasum":"4479ca61945eb8304ddf7a5149b226ead20bd736","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.28eac13b.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDjB1CRA9TVsSAnZWagAAYDEP/RNEFIdEZZcLfjzYUZaY\n1UNWN6Wa9M2Z1kQloxX/d9Sr1zqP6EfPj20w1FAkJfWyHuVV6BLHiNT9hKPK\nQwA31PUbfsqV0LvQxyHpuAaD0B2DmSNBICeks7xGjQqj6M3ZJkRlTQ1H2vZZ\nypxjSlsmYng+gNjEB0ALTYLFf18SgeflGzqTLBbnRsSSOKxfjQIOD0iMS1sc\nNBUhqmXafUTiNMyaajUJ1ET1R3M3G3kH+BU59motXZ/YO9aLusbJwKz4MNST\nYGJpS+y+taKKw25PyJEKYg9eiqScgHesfRedxWglN5IMeoSLTCT2KB7kiHFK\nEbrqPbzfEOqTObdT2qnkW6/Id7ZpMi27EbdTXSaixNW2AXAEuzYuz/wGoGEz\nWM3q07FHiDHnT/qcQwpwzy659j6RzmlaOUcCjn9kkFv2KV2K8Htb0GXyEVtp\n6dd5pOeQCGfOcfwJqS95+X9B3DriC1MAHNgVBXtGFP5E47eXEwhwWSHWmLXH\nrnCXxME74DhJl8YbeVqcdeFTJj96FtnKVW7Szo+ll9RKLNlZIzJT9vUXQOMF\nnuzK6TNG41meBrU1dKmWPPiP1b50ZegmnZaTKFJhwi+4qNu/U1otatkwVvDo\nvMI21puarEBl6ijxlHO+RSW3SNRbpFzXg78zrRmqITi8wo7S3NZBctBPgY8G\ncYLk\r\n=agHT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCc3BDj1ggptOzXYpYYV2tFiUkKy/bTHEL8rFOItV1LbQIhAPIkTWInNYKQriNFYk3w0XdWhUiShqRRhVg/lPSGC+m3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.28eac13b.0_1594765428962_0.27804576475007736"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.44966b65.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.44966b65.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.44966b65.0","@material/mwc-tab":"0.18.0-canary.44966b65.0","@material/mwc-tab-scroller":"0.18.0-canary.44966b65.0","@material/tab":"=8.0.0-canary.ad4df58c1.0","@material/tab-bar":"=8.0.0-canary.ad4df58c1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e431cd0a71967599b61ba4219d726819807947ae","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e431cd0a71967599b61ba4219d726819807947ae/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.44966b65.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-JeivYtg/t5w8+92xozfQJMCBIncQkmx5bP4YLiPUjT3y4Rq2liDMsNW5jaZc15PJtYSV0YgupNP04w329ZYMUQ==","shasum":"02d3cc3f2f3a457f67f0855474a5acb1f3d0b984","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.44966b65.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfD0VoCRA9TVsSAnZWagAAWKoP/jXWKfbfQsOweP2tH6Ns\nW5EiypFF+oe2MKVV2zODD6ygJSPyioynFpRFqaJJsja5rhiHielez4pc5n1y\nJDtaTSoRYyTdfHcbD8YRVmeP5dSvp92jjAJz8j3wgpJIsdkuRJLfxUsSpGXQ\nQOoVfVqvf8jT+33+OaOMvUrZn5cuS0Sl1E1Rpt2uuVMOBOT8DujzRT40O2gE\nW+X8xENz0wl8MeavGYtxJAOZecDDIS1Vr7n/1pg9Tq1KImtakZ8oiRPp1/bd\nS1wh5WYbKo2HnSbez5pIaceC8jgeDhvNs60uykzQm3SCBop7F3/rzVK+UIkv\nMLu+MW8mUCtZQ4RrCCiJi04aSxpEKBcBlKdYgRvVoaZ8/Ced/m5ufVoKtyyk\nDudAYRXkdGcwdaWWw3ekOgYZoJ5R6vEaMZxvuggTCks5NE04lJIwwraanVbv\nkajLgKz9pNyxDXTirzoHF8VuYgtyyy/NWATyPkEdm9KvS0R34NPXHxvkTfmM\nNEU9sXdHcP4r1OtC6Z5/tVtrXWfWGCU0YFJcI6LpEOGObOBRFRJMsXGqRef8\nGvfiXNeU8RcXf8vkRGJixkLvDke2aFWyyGNALrQCdzItL32y1K55ttiIrumM\nnS5q/bC0YUaxfPnMIbgOj9r6jNbOXO4h4UeewLvJffiLJNj39Cd5O29hujgt\nqCJb\r\n=Gt1J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBVgKHo6/K1DWlUHqkpabi8U7soBxwfpirSerinSdnnRAiBaT3w7lbYIFJOGaU9EgqudaY0l2gziiRbovlbygAcy1w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.44966b65.0_1594836327670_0.2537426369230049"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3ef0ef60.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.3ef0ef60.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3ef0ef60.0","@material/mwc-tab":"0.18.0-canary.3ef0ef60.0","@material/mwc-tab-scroller":"0.18.0-canary.3ef0ef60.0","@material/tab":"=8.0.0-canary.01db89053.0","@material/tab-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"6fd176476c86425b826862155a44202aed930407","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6fd176476c86425b826862155a44202aed930407/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.3ef0ef60.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-dFQL6Su8+yAANl79/HJPbZsPbtYtSIfZvH8anKEJBCyqzqqKY9jEI9yYpLtqSvvOLl0lbRCZ85Do+2ZN+ZS1gg==","shasum":"6fca8b554f630fd74f594166817f082fbf580494","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.3ef0ef60.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIZxCRA9TVsSAnZWagAABugP/ig87T5EgHNopNF6og+L\nxeH5tRfPQOm81FJgyltsh0SdyacoSF764TATM/LNlfUyJGwWc0Cq6bfiirlD\nipLiISHJDaJIr+fXPgKMwAqZXAxoEsk3Mr/LPW4/ZVOXcY6orUlvykk30ER5\n21atPfiTc1VTJhl5UKS9W/M4472eM0zlL/vqIMSlHmRXaLD1pTFdVwgMqCdZ\nK4ubRGgHUQ5VanP2Z60OFBWAdM5+i0Z7ZL4gTlAg0zl6leJ1ALb0eXhL+pYm\nQojly6w9T61NMdVMFXeiHOLHbptb4sLSxaa9xTJ6WZRSXPiO/wBLtFrVcQVH\n5thfjI7pprz86AnFrxR1S3K7K0d7w2RPLzEt30IZ7eHR4CDKkppSfaZ7MXtq\nOfW6pgYsVGvNp9rpKIWvM+qe638t/TByPQ+0BjNKy9PNIB5j7aL845v93W5q\nghjHYQvaZo8yqrGtOn2sKAA9b87oWpe8GzoNXJ65YS4zT2CFfgxz/KP9LmoE\nGQ+04hGqwIC8ba/dhw7LsV0w+xSuCbCW+YCGDRHFK6b0UqszchH68LEkFpVS\njhHJiFeWq7bHs6lQhNd9Zgo7Wtaw/WF+l47kAwkUaLiy38/DtWym1sW/L+2K\nhYprK3FvqYTZkPzk4WDrcKrQmwjgNYU93AbCfUj4kaBiJnTfsv2zjjTl8/4Y\n8ULt\r\n=NOp+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAjn5gawUwWrWuVnDqpSRaOgqJBmMPmgrAujCho0k72AIhAJe6MsWftiuuVXseLetzU1FDIvJpsX+ANQfVCH2SQoqL"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.3ef0ef60.0_1594918512759_0.045650030310919076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.fcebf9e6.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.fcebf9e6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.fcebf9e6.0","@material/mwc-tab":"0.18.0-canary.fcebf9e6.0","@material/mwc-tab-scroller":"0.18.0-canary.fcebf9e6.0","@material/tab":"=8.0.0-canary.01db89053.0","@material/tab-bar":"=8.0.0-canary.01db89053.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"27c24842ba1b663ca72b52321d89d72fc7ef34ff","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/27c24842ba1b663ca72b52321d89d72fc7ef34ff/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.fcebf9e6.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-FhyGovCxciz7k925I5O6IexqahYdhtys+fR/UsYi06nOVPWuabtjchc6xmMR7Kqi1Xv2ImCWX/PCKKUG7te5bA==","shasum":"234f57f064953081ba0a52db6f6be51a7dc31a54","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.fcebf9e6.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFeaCCRA9TVsSAnZWagAAhhwP/AzLBi1M8OCkQOVYBJas\nSWKD25WamF7JB7qR67pfB7cFAExthAs6Gf64/Pu/+ov5onwu2Ia3o7US++Ug\n1d4BOG5307q+eWdpyiCWf2pDSlzvNVhln/KqgGaEVaH/iR1F/j51YFRjJEqH\nvd6Rcq90fPWIb0VvHXke2kWiaNsm/dAUW+FB1kmH1tWRuppstTg03H6BRAtW\nCXzoGAkFGVTtcMnKOX/MRZuF1xuVpdPtFxHgAx1W9CDC1OgK/zVw9MoMzXKy\nNaKzB5rIn8zZD7g+jrzSmPm30f88tHfyZEYXooJMP1GjznlUb6GPuKNWWq99\noC1/BAoLlyTI/Op/BBUfAamWYQbQ62tmRvRIWT3dUQH9ZKxhB8SqKr6B+Xkg\n8NKjCIHdwLh8JL5bq37rwbswSkCi4Zppg3Bu4LuDF+sccpo5X5EV8mMrfAt6\nrfRiohta43FxKbbU7eXhtZ6EaKMIojxr0MXOfGI2w+JXSAzjrDjxhYnqasdH\n40dpm/aQwsr0pQb5YIt7qvDfR45gpdpeSfQigoSJxY6cvRQVlNskDve/DL4/\n0NiUxwGuoZ26YnwZo2nTiACZlNQDEg7tQflmIGMZwQBtbHdiaYocEwCLccn3\n32CxBE8C05+rXE56/HWtD/3UFN5ZJ2L4CKeOnfXCK63+/hL5kziMq6eRaVkB\nMVdn\r\n=fl73\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDEdTortfspSELjEhtiGyckqpC8ME7afBjHbD6+cwJW2wIgYE3ODN7G+anGizkaQUlWk6airv2VjMx8t4Cf15qgMFo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.fcebf9e6.0_1595270786259_0.3536491758253171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b6a772df.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.b6a772df.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b6a772df.0","@material/mwc-tab":"0.18.0-canary.b6a772df.0","@material/mwc-tab-scroller":"0.18.0-canary.b6a772df.0","@material/tab":"=8.0.0-canary.fb5a4cdeb.0","@material/tab-bar":"=8.0.0-canary.fb5a4cdeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"aff69a9137a8578f83238c4b15f6ef6447db7c80","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aff69a9137a8578f83238c4b15f6ef6447db7c80/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.b6a772df.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RW2hBYm4eRS1HLhL5gr1946XzyIyQFmts4Tg6dgta2riBD5N0+guqm2m0H5SdiSSCcwSFuaOWrrg6df3XfOPHw==","shasum":"42ffa9b4911e23cf4fd2877ba52dddb5d84e6d67","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.b6a772df.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFh7jCRA9TVsSAnZWagAAdNAP/RejcVcOJO0jA9nt/Vkm\nc0qd4yf5fDx7uSKXru15rjD8dhPcwq2d0Dm/gJluCtFrCpaDNbLGzTvZm4v0\n1paiuVt1U6mMdUZpSN5CH9qMqccGENhde09uNqd2cuOoBnVKgqRajJ01oj6A\nerCzGkIDV3sw/Rglc9TWK05OfGFNCGovoXTGtEFSQmRHBE+6ktPfv71SVOU8\nWZzOaQ3O11+Y/R66XRo5I/L6QFl0MPHDI29ZlsRHWMe1NettUYHlGk71/iCX\nGKNscdw58/XXEK+N4Tupg3h12/Q/cueHdT1DeRHf7zu6R9hA0W98Ws0phXfq\ndw0BGbdzMq/VHW9zYzbwavRrSlBUYseenZgna/KGCaYbPz15l5Y8pO2IDozD\nd63Fzsx3AAFKoJOM+j4sp9H2WlzIBdR8EekmVODGzA4/DNHsZR4yNq2Mu1zo\nE+Kc7AgjqDaIfbs8UzBp4Yht5sA44vOCXD+5n9SB9YcZ7Ta/jlCJAJtoMhzr\nvUouAxkeqx08SkI+MipSRPNVSHSseWvSp9sx/Ic9H9GF5glQFVfJvAg28oah\nr3K7kCQWPr7yevaSa1P7g9SnjXatZJOcgiM6giJpltmC6OYRjaceUMVfgCb6\n8Wf5nmmIQyidcxW3iVNZVOCJyzQwvbP5CiQS1KqCNr74y5D9ADS/3D5yTT/B\n3XK8\r\n=k/4T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUmrdJPIkuGUHqtsBKzMG7qFyF4yA2tfL5IyY4QIIrAwIhAKIMrcn5vS0AorlipoRz96t9o9REJcaamHIqd32Ut0MJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.b6a772df.0_1595285218666_0.20711080164963902"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f6a6ca38.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.f6a6ca38.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f6a6ca38.0","@material/mwc-tab":"0.18.0-canary.f6a6ca38.0","@material/mwc-tab-scroller":"0.18.0-canary.f6a6ca38.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","@material/tab-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"44166a768d79b9da90f97e27d954aa263d27b4b5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44166a768d79b9da90f97e27d954aa263d27b4b5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.f6a6ca38.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4QvFG32+jaDD7WOz6ryTKXh577OBkRn+dW3iOAJzYUinC5K37IJWKW5qvO+6PctJIxbuCorKGOnD7yxD+yxZaQ==","shasum":"e8032ce5f2dba78f7dddcf050f8baeea93e64fab","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.f6a6ca38.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFxqsCRA9TVsSAnZWagAAKnsQAJCaOTB2HqNpsnbbtVG5\nuEztvXU9SwVi7/k3XNpvTkjocsK47rn+hZQpJMvWXH7gKKNW3oKjjTDwUBZe\nhuBthIETjgtOWkMGlmB2C0hNIpGHC5KlcmGV7Z3WA8rKnkNXZqCMGT7r0NRP\nCCN0+uBZJ6x2MrPY6qNBxzJuIFtv7LlgbBvOX53q/0O4nMg5YOCpKbNAAz79\nH1/bvJiEbReP8ckpgDJh7u2spmugRl6JyH1KeQBrXQ6+aUyS57CWU2oTeepA\ne2oRgPEMjLt9tDoHU4kFLp9i4S5XOrsE9eorrWHzSfsNLajFwGSHdBrktDhx\nQSEfv+IrU9fAkZbccVv8TjF0nIWYo9d3BGGRYlle7F/yYTnidmzvaD0jILSs\niYS4a5tw/G1zEweLbKYE38YQiAcpD3fLXUGA+Ac3UDwBLj3pSUwQrqOj26LW\nOqbz+Sa7Hy3wjXBeeFBePnfLlL3dI099sTXMHESTfeCtwHhYpOLVKkYHikMY\nsdMLQ9VJAgSvhYVkh5vGdpgEtUsOl7pXY3n0qBd2QnAIhMQQFNZECM2YXBi0\nODc0FuCQb9qxfOiW+cj5I5TYW1PmqCKGO8MYi8FUOPs2f9aYeUhCIthBcYxP\nSByqKS7nvU46h2GaEsb+NE/hwrQkOM3SPkfn26jbE167Ickwy0dpfbSDtKYs\nXQzg\r\n=W1AQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBitbsYwZdrY87JRZfvTBvfMwIHJ+LcSlOceWw1V2Li5AiBlQWJ4gQN28uWcszB82p+VxW5V1kCpgwydVLILP35Jog=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.f6a6ca38.0_1595349676166_0.6808343782405835"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.647dd6b7.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.647dd6b7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.647dd6b7.0","@material/mwc-tab":"0.18.0-canary.647dd6b7.0","@material/mwc-tab-scroller":"0.18.0-canary.647dd6b7.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","@material/tab-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ebb4e6346746ba552191ef32f6686136b75b1a6b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebb4e6346746ba552191ef32f6686136b75b1a6b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.647dd6b7.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+Zwt9xGRYw8WDuKGNBHauXAIOuOmAaOqGTdhMea0sbBuvtHcrUTK11HOAISVpeB599fwvniNH9mwsbEvcTIo/A==","shasum":"e83d34ed7a0dece3c1df3d6a3dc1f679da259e94","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.647dd6b7.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzehCRA9TVsSAnZWagAA5vcP/1b+93T0nA+qCk8/d5ka\nDIzInZxYV+snWJ/7KVgCMnd4voOCa2rLWrBviIJpMGF2TiovbRN3BOR6nxTL\nktQPK0hXSUJi4H+0ZdHsq7QLfdmOaSOrVpfNs29m7VsL6k+B3yohgfUrMOJ9\n7Ro0EW/5o122fh52eWTjYwlR22PCnnQK2OYW0zJ9XSSB7MSwg0fIifRX/PgV\nM9YgOxP8OQ+1MNgnXOh5njRJWN617CVtgWqi/1Ux9pl0Oceqx7kwcvDx9LiW\nlDK96C6Hm06/E0UTW8M7PoPB4N3rKu+a2QOkIb/oi42tuSZqY7HM1pH7aFvL\n0OGPEMcR9D3P43+KASs5xBHhSqIF2Xsb+lN6ram3TD0OpucwLBomeaEL3u5k\nqqnpm7LdCbujONU2qe69kQPV51WF2/Y81NLRjMbRF9DpX8izSPYqrFXuDhWg\nltJKU5KUvT1mgFKndXHCnbdaEAdZyMnnnUA3H07DaDfgBfvpX7zFp7FwAtFV\nO1MLXMnIipC2fjBL3rpELLeUrADfi+8qR9OVffsua4AUVOVd+/Epsw9p+gDp\nnoc/eJXSQs2IBp7lm2M1ZqaIKFDw7/QrJR1QCcuZ0bULXH9NAC7vU7wxwFt0\npmY3i7tByCUvgWwmWxJMhQAxCUxLbL+RYGePCWmf0yrbZnOpUCc4vBKM6bGH\n3GZQ\r\n=fVuB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIArHgv6n2+NgCmJrUGa54IlCMQ5c4smmO/Xd/KIdhtLzAiEA8JeMvRGkrJoxO5NeVG2eiAmOW4VXndvwZVga4TDUBuk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.647dd6b7.0_1595357089432_0.9011847017916543"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3cb7406f.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.3cb7406f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3cb7406f.0","@material/mwc-tab":"0.18.0-canary.3cb7406f.0","@material/mwc-tab-scroller":"0.18.0-canary.3cb7406f.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","@material/tab-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18d8050825886f251014bddc9658829794a0010c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18d8050825886f251014bddc9658829794a0010c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.3cb7406f.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-kV5pKMPE92vucMLuqysis7923ov908DkbWICmzfcBevvtq03Lnx6nXHRJCxMiKqjTNB0tvGTHQIXucthWNkrgw==","shasum":"8327ff297d20f44877364e1665344104943a86c6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.3cb7406f.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGIw1CRA9TVsSAnZWagAA2qEQAJLdHRDmXRTnh3mXwy+e\nbFLRw4o220y4CfsBa5f/nmVjhx0TT4uDmM8HzW/H98H9GxBNf0ODNbrIaBES\nm9gLD5XBuW/PAeZxQkfthy85YiJVJ2yXkxWJjD+9rBw5j0GWvsisnTesC8PT\nBPLPDJlBO220caCrEJRjAz9UXxYUlxNmBy1+uf6mzsiy1GejEH8m084O/1sS\nI5D4c07ICwZG4ysN4vEGBCkqhIODv84iMWIqzW/7hzss7We+BCZG4LY131ef\niPJF8vpXj8p8u5o7KMiXNPU5xg4MkboWi7LYocMP20C3aVkmDQ7ylVveRz12\nDsnJUSRK2XCSzZM5UwqZYUR7gSJFHb/q0+3Fo1q8XVfOMmG7y+ffwyfnxbyf\nhd5wOV8+HCzMh+8Lq0/1VhlyG10r96TUGEQHVeBkXiTIAsZW4sa5Z4CT9Cy0\nF/pWKiXSB4MTGB6vOLByBPZDyVbFyKjPCHb0BGf6ibNl6vbaGk329kkkhas+\nwlwvyR4N6pyhWfe9EwzxrnZeqjoQOirclt3KNTqnY1H0WEPIWtRx15LZOVH0\nppKd8Y5S09KSBrtyxLexOXS++DqHKESaXNaXdNxyBC6vC/p3DSXpbDgEraBq\nuMXJx5J7cThEXdIqJYjd65B4cSHR4memRXHFhxC3uiQMJutgRxYAl5fisnkz\nbnqP\r\n=gdId\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxYrb3BQtDKblLKCkLK+HXWjk2vEVmI60+rQiTYDnyeQIgfeWNaeKp/qSBCNwxxfxeQHQtmrezcsqaW+62qEX1Vhk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.3cb7406f.0_1595444276799_0.9736604693940667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5717a5a1.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.5717a5a1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5717a5a1.0","@material/mwc-tab":"0.18.0-canary.5717a5a1.0","@material/mwc-tab-scroller":"0.18.0-canary.5717a5a1.0","@material/tab":"=8.0.0-canary.abcdbcfeb.0","@material/tab-bar":"=8.0.0-canary.abcdbcfeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"80cfd9e67c10918291b4799451796c633cec6f96","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80cfd9e67c10918291b4799451796c633cec6f96/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.5717a5a1.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-RiWGxdmhbHldfU4lA99jwC8yddHRW22fK1V6/PJjusey5ipQ2JJqStai9c0DzTeHAk50C+sMESge/q8TQgm3UQ==","shasum":"fe50f39eeea95f7e5198047725e88aa1f1ae6755","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.5717a5a1.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLJBCRA9TVsSAnZWagAAgjQQAIA+2P2v+/GI4QTzDsxQ\nY/BsNsee6zNQQoWzz2Rege5LT8aE3mFVBLq1duwvhCp1flsrxnDn0BRjxVU1\nDH2Ltt3W4fPOXRezFboX8DldY9AqBo4eL1XE1NTzto1+ycwIKgnTg1gbBcla\n/ZDOPFMzZlPg37luGSl+xaojPPnZ9JoNFm76T/svZml5ghQMXNQnIB9lt2O5\neI8xn8OX/jtJYRruChIR2zZtYr5aU7qnWnIZMEERvFu42jZWJ0BMM5ac2GMN\nNjIKMhMReKyY97c03BT+Yv+KQmconLnUEz441xcu3QD9SzGJaGtX12nxQ6Vh\nL3bNaVs41VX3H9xoyAYj0dZFgK5KGP5LExs37JXq7Iv3nIKAv3yTPqY25rE6\nprnUGNSuBeGYSGB6Lduj2YWjz+EVu2WBpoGcXckFx2/hlk53kXOGAzXRWWqJ\ne92JKsUitVfbRUwyHhjDxp2hs0EPFzMF6nrRQ4gZFbbUjivKlbNb1zoY9+aj\nzWURjs6O6SchNYzkHWuzbfb4hrIV3Z4wN/yjQOS1PEmzGti+tcQ8DoXLU+vn\nXj8RKxShRp1lriT/sHqipU75PNTg1yKPDQ/RXaljdqevlPlmFHK8/Y0vTvmN\n98+9r0hLPCXlzVqjz+VPFCzaGEkEptal4/0yz2mseYy4v/i7kNGZeRb/GeZN\n/s7t\r\n=bj3x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGiUyuNg3g0xxk/f9UdH1Ht2roMfBt21kiP8Cp+KZJE/AiBMHECb3H0Qy7mgki0CKAROr27C+jo5FC0O4606MxPjrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.5717a5a1.0_1595454017173_0.7289880631423789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.d84cd4b2.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.d84cd4b2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.d84cd4b2.0","@material/mwc-tab":"0.18.0-canary.d84cd4b2.0","@material/mwc-tab-scroller":"0.18.0-canary.d84cd4b2.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"c90ecef90fa937fc0931100e4f1d3627211865dc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c90ecef90fa937fc0931100e4f1d3627211865dc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.d84cd4b2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-vuzgwnA5/gORaTMYTYTiTGhkmWV7AXp4v953Ju2n2UzhUCX3owp8Uj1J/BlfzBWnrP0wdl+bIqzuk789SH6eqg==","shasum":"c9209b595812797b0b7846985cf4cd4ab8fa1d08","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.d84cd4b2.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLK7CRA9TVsSAnZWagAAE4AP+gOxVX8jtEuRjCEVYA0m\nqfPJk6Ww2rJa6OGCN3IZRv0VvYLlZBOFHP9KZww+FY8QLMG9DXpLJwDfLTv7\n363qKqrdlDUk3N40d996BonzAhfCTOg2gZc33yL1a5gK21A+/yt02L9TBzIC\nCukbqnOVk7wYvAtI/aYu7uTLgYM7pRYwYPTJ5DyZAHpiolW6wYf66HxuKgE0\nou+lEYfF0ID+T8fTCBhHHBM8oQyQS3ndclcpAEsBhwjk54L34ZnjVdeR0FmR\nXfk5IfmegzBtGKLDNixmKzyU0AjxCrCX1i0qui4/xLQP7Rmfv8cTQXOwtszb\nFPUVWvwZwko3qzY4T2PnimOBGblD81ScYzP8/r0z6+Yw8cWpIxvZP9krobCw\nCeV0Ox+js3dwS50HNVliV5levdR1gcdVQbclTwNm36cUfN6IlpId2JrMoJbT\nCooQivKv8bLTjQyc/cGaLxrekw+UChoTzy3l0rBR6Qt561UgDCOXWLiswNyV\nKOR7nddfENkuSmLg4hbaCS2msFCbopmzAn6yTdFwzpYYrvq6qkXNriky2KNE\nQ3CO0HgnbBwy6OwZELFE+mxCFLgM/Jiy0zfnt1+XEoPEPEu7mj/1E36EUUt+\noxNoesD2xAoTraSdUnJa+iea4Vxc4KSIiNd0zn+equ967XY8y3OyUllo3263\nDmeq\r\n=8rVL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYoIAhbjAHtvEQPqhhLqduUsmpkjc4TORfqR1HyfZZbAiEAqInZciQoyc4aCL3PFTSpMaP7bDGRYS+hB6/q8QptVZk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.d84cd4b2.0_1595454139345_0.8545686206140706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f279e7fc.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.f279e7fc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f279e7fc.0","@material/mwc-tab":"0.18.0-canary.f279e7fc.0","@material/mwc-tab-scroller":"0.18.0-canary.f279e7fc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"73c3335df275cf5fb17f3b990df9c4b8184ce3ed","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/73c3335df275cf5fb17f3b990df9c4b8184ce3ed/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.f279e7fc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-ZEp7iwKTGFSnGP7lLqaKbGPZo71mEzOhFjDl2BoTyNMcK+GQR+1bixedigZ0bXbFXXCehASKrT77gjJv70JEdw==","shasum":"9d59e35089ee2d10bcbf462d4071be9a2fc999d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.f279e7fc.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLcmCRA9TVsSAnZWagAA3PwP/RoaJjcbZ3iv5FozCoIg\nXckQxHfrgsiu+zJh+Ng1pC/5OGCwsHn+ElOod7zAwKq+OjqRdGAf9E3PNUdR\nJGBQZSQNhQI24zlnly/RPidpj1nmdsDC8nU9qYsRE8+eYPMpl0xcXKhLUo/A\nTeMQsmY3pfDuSwEOdMXsJPtXUBOz1yJ9Fb2M13L+v902w55gictijXw8ObPK\nnW9kKDS/+be12ShKy/cdzChk6hRkHMiuh8J1dW2oUoOOb8ODqgZtfVe+cj+a\ncYI4axisXVYnL3dP6FvZ+pum7ZyW6nN85b65iKUYEqEVAtu6i8UyFWHcwcGJ\nSWgMypT6bwBKoexaysmNPVGWXjFRWsjfRRHPF1xaDkT/AHIln3oeHJAU6Oqz\nENm8Y+BvaQxTVSvcmoZ2qPfT1gUk3Q+BKdzYlMqVilcQclPxnxA8uvQ3GLol\nJKYltVGAZmw3q9oYhIV+W5M1Jd7EQ9EjCHDwye1usfUkY+/+7jpcbO405WM/\njxDfDgQHwdx4Q39nWJ5NEh5wI6htqtJmfeqIJ5xmGCc00rR4V4AoOn9ecWMk\nKD7qyVuaQBwR/1w730rHq0YnWyDK0FTaT09neuPJaDogr3iWPOhzl0lnONLS\n1+yRNfAj5aeTMlDY4vO2LZSYwNY7uJKfozKoaV5w1aQchiwtgDiamsgfyGoC\n5x4a\r\n=uVhu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvBh6bk6xLv9Xbxgfzwc6+eecWEi5EI02BX1Lpu17yOwIgSF5+MpxBC7QEzUqDRrb2VGmuPKILnqnrSrJ67odmq4Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.f279e7fc.0_1595455270216_0.21802985255469842"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f181e3bc.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.f181e3bc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f181e3bc.0","@material/mwc-tab":"0.18.0-canary.f181e3bc.0","@material/mwc-tab-scroller":"0.18.0-canary.f181e3bc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"33201638ca11f3c34598273b4ab4ec40bb019951","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33201638ca11f3c34598273b4ab4ec40bb019951/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.f181e3bc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-+A48/iBylBxQyuGQNlTw0olJi6X8EP7lhOcwcJpeT4RicGQCiUZVmGnis33PXx11vGNf9bo+Hzz/UFnfoKhUTA==","shasum":"b3dd76b13e13d7cb021f6c57cc4325d3c0a7698f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.f181e3bc.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLebCRA9TVsSAnZWagAAT8MP/jO9Ww5uQSGXouwCMpXk\n9LTbqrX+XC6WXtMcRiKfYDsACn86ogXtBRGxpNU59LO+4J8vNxedPq7VNfiu\nIKiFzYcqjuVwNbMFnOjvLHuR5T14Rmt3zoyOWMXmXS75D3DIjUQMCfdjDqwO\nexyRegYkz/148KhwV0hLmw+X8m1yeXx58eoIrQhB/tdsFvpmMAobRclWzXR1\n+wP9kbo9iH3LMO1oaRwBXCXh6QTEtTe5JJwmpOmJP+XqA0GQjhkyp8pkOL2v\n/4ebzTDm8uZmp13HVBWP8/JzTZEDkAHFNmcjXTWYEgxbDNcC9qslSc1eaNzQ\nKHoB3fcZ7be+dsFK6pdr9hQCn9AE1yOWhmKALsgO2p9AE4jBsRpbeAgnU9Pj\nwgEPT/GNw2YJbGa3i80HRerlp/LapKRkANL4JUDPtAqETKVxb7nvlG1ML8Bg\ntn3A9qKZx1jd7r1xDkoLBg9ppDbAYoJ4jBOx7qCU2kNf22YZtTtOw8YfH5/u\nUGUw9CFvX7aVuV7ibJqiYGug/O8P+fx2fG9JVt3wXE/b+Qa0sHufBqz7PuFU\n9EMNtlU7v/zCRMp9pldZvG7hI7W13/kuWf5E6snzYql2qugImicuw1bPfIjK\n0Sx8HFPl2XC/E2y/yfMUojEvDmXpnRCO+XYcxeNB2dQ2T8zQPv11huUulXXM\nV0hc\r\n=m57Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDp6V3uCAjxU+ORgLjdaxqTPDedjv+hcZjQ0v6X0cO/jQIhAP11Y8pX5ZunG454G9fYMFgOYr/YrKb8QZ3mswpHTTpz"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.f181e3bc.0_1595455387539_0.7868695823737815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.346a622a.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.346a622a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.346a622a.0","@material/mwc-tab":"0.18.0-canary.346a622a.0","@material/mwc-tab-scroller":"0.18.0-canary.346a622a.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"03c5331dce90f41a530d3c8569d87c9569257d13","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/03c5331dce90f41a530d3c8569d87c9569257d13/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.346a622a.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-zfufrsAgXmQKtPekMemS3rYNkVTg74S08xyLSTT4U6xO9eICIVr90n2yag+V+ScHJEQOG2uOkUQsyhG1iNyh7w==","shasum":"b7dbcc762b10da418b124137b0248019842d2b3a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.346a622a.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGM5lCRA9TVsSAnZWagAADB4P/RlzOPfwgFSMWr53tRLO\nRVmDVAND3go9Xa7IyZttU0ziczHWW9EO/twefgZTjhbLrVc4CPWxy6WD9Suf\nO6onE1Byno4E9w1uU2Xtd0Jqj/kOT20selIrTHVFmyy88TN4qyDFwruWGWlM\nd0FqboxSW1wsqg313ZW6+3MP68xK/33y6lDVulRrXCUnUToNif1jnLzRV18F\n3/vvRC/97HP5NuUyl7d2M4a9XXUJXGaAq2kn6wfwT8WuXxS03cWTsMcCqEPt\ncJKa2Z4s1+LZ8BpWH5giOfGmkwUjjn0csl2E62lurtargFkOs1RjFfXGwRBo\nIuTMmdhvmdOtzz0DC2dZaQ0VkaC5FDBBJ4RiCVR17kyOpgGvS2/lznTFYsrm\n7URlsoWtHvpUNPd4vbddx/yc3Ec5yaOOHzmoiv3rZl5PePOYf6CD/bLgO4dI\nUyEbNU+y5UOjKdSqalENs+9BI3IXNZFOZwgVkZTbQB0ZDtOB7clCA2RetmDA\nRPchaejwtEZxHrUiYs3hoNvn5UxXLRwrmE2i9m6Ms1GgwOqYwrJpTuv9+ut5\nrTU37BGOn9DZvZcpSn+HxFzqF5nmN6tvx4vbMu9K15pJux+StAa0dsp62ueK\n1nTu3Og1G5skOxv8b6aydOhu7iDJpSIlyRDVmgGhtDdcal24Ek+UL0KP2lsj\n0fV+\r\n=1rBY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCawhNAADMAvWdOaBupTogYPSeTdiP5V406ACRF/0qUJAIgL+/Os/wxidoOv+B7eYx8w6SZcE2SvlQnPKiKfU5P4cs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.346a622a.0_1595461221392_0.566631279523341"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c9e8a848.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.c9e8a848.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c9e8a848.0","@material/mwc-tab":"0.18.0-canary.c9e8a848.0","@material/mwc-tab-scroller":"0.18.0-canary.c9e8a848.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"bdd3a24691563386cbeffdb8824ffa26a3c03ba3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bdd3a24691563386cbeffdb8824ffa26a3c03ba3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.c9e8a848.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-4sYnpL9hbh1xX4MEVLWL2PjwcmiGYqXiLaRVbIhxfjWt1Iqkm6nT3cTf2TUm9Kq1y9jiCXYiMS+0ZXW3JaiF7w==","shasum":"9a3f93ba0b5db1dfa50ae3d235447c7de8dfec5c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.c9e8a848.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOOXCRA9TVsSAnZWagAA7dwP/3Bk0Ux7nZ0rsxhZn8Hs\n1rA9X8B8dPCCIKOch94h31+93uStdaT2s67gsNM5Pg3K4zU0oKQQjrQ/9hjb\naebrtrtkYIv1b4AdhdEb7Sj28ExD/gEmvIes0lDttMtLW1YqqbaIq7ihKGdt\nPR0U2ty0kr2cXqpOkLoZl+VxBNKYTp9n/dbd766JuNp6Q5HpAjzQYmFXYYi4\nJqri5OsUd3lFYLo18sPdQGlKwDCnq81S3y9+F8nsjycafkRJCPXIPO3IJXyW\nC291HVUtxFmdIawNYSSLnj3NISjlFnLNxGInSt9OP7ZcT0fcXOPejTvMctuQ\nGvbiBoSE4mXjEQUJW2h2WeRswaRo0XOMnfjT0xvml41jg350XBUrbG6RNsyr\nL6ZlkJLHlyrFbYtZUE3bq3DP9lyWaypW8THVl+dLdY8VUcP5PLS07HwXS7Ua\nmNTAgw03bi5tsCPHRRE3jcwbOQ32lnbk4Ic6OCdweoJMdZ+wP4fJyGhOlrql\n1rXkgThtnWzHLUD8DrDft7ZRC9jVWrgqJstBTiShMFtybvwWNdffftJxExFs\nDFIm3ac7ZjZVMS1LQmSg8Ou6q6VpZ/kIQkEEvICmTCFA714jsgdeJR8NAl3R\nk26yOp6AhixyL0/9J65lABG7A4i71Sgzhqwm79tVL0INJZUiL153Dya0Sl40\nD52o\r\n=0TAR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHcrVKZECbcqdy7ynsvw25vYkIyqbVSS5EqyAthIYR9mAiBeTuV2urkd3YVP+D2Ng6ATIH7tgRUR0RhB4mhAgxMvhQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.c9e8a848.0_1595466647396_0.9467032777157827"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.718c385c.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.718c385c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.718c385c.0","@material/mwc-tab":"0.18.0-canary.718c385c.0","@material/mwc-tab-scroller":"0.18.0-canary.718c385c.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dbfbcdf25eee8ad94b581e3e4da50e65b4ebce74/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.718c385c.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-6o6DLtOyfbi6TwIMSVbSZQAkpLBETljUpaHO2EApzw0DeQNF0jyK3nyFt+lIi0pqwP4OioARTDleGJr5LOr/1w==","shasum":"b5d3b2486e99da77707604fe02635a388235f44c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.718c385c.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGe3gCRA9TVsSAnZWagAAqnoP/1OBMOUVXbjCZmEqayD1\nOHUbh1w/aftV8/nGvG5kpMmp6AsF/l6VgEDMvkVm85Qkywmhk0ARUSy5q/He\nMfxRSMUAhbpcSWfaE/WDJKiJHHuf2kQqboFxqKxLYPGZIBW5CP7fYoulxs70\n+LAhjT1EeWbvS2JgOtf32HldfFxDNsiQKwkhovK7eg5uQh5cDplm9QwCcKwR\nvTszmmcZ+Dcjm/WRKc3J/LE3GHDTIUjEfy3KKwqBJXUMZz8iKe0pUizFZx8z\nwxSULKjafsxqHWpklShKu6h9oK5UEXzTVkqgxs6DbCshkUAhWkZw62RveMze\ncilRgvyi09KNUx9oqbLCq7J5dMyhsI0k00Y1KuJnWnZoXwUDFMsVAH1k2clS\nWejVEV+co/HpIkLgfNEzECrI7pTSxaj0KKM1N21BQ0bjZj+EWEE0gjrtbV5D\noLcQloJWjm8jMczDR8wBZoOcjN8Vq/rgGGbfZPU3WG+J7/KcNi8P03XKNljF\nwIJiLAaqaTwewpVv4tH+zDA2wJiJR2gifppmX/tDDD0cnxpVD7oVvFDA6tRK\nSxBgyFPdCf4jpDJm3Nsf6rG/xBe9GCi/hBxv6pU66Q5ujandqDHSpsELuqzA\nOUbuMGkdKI6draex4yK6b/8PrE24l3hrUw7sId7W8TX4jUE6dY54k45oP1+F\naYzj\r\n=0ot3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCIeS7iDP1/wl/UqkbdPlHWK/+lRBE0W2MyCImyVvs1JwIhAKrRah3pi7nanTVyCYroFZ62uR0D5imAcNVvccPgO0uk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.718c385c.0_1595534815862_0.1698351387042598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.cd516a27.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.cd516a27.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.cd516a27.0","@material/mwc-tab":"0.18.0-canary.cd516a27.0","@material/mwc-tab-scroller":"0.18.0-canary.cd516a27.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e3b4c123ab8be0eaab91697be67dab225c8ea378","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3b4c123ab8be0eaab91697be67dab225c8ea378/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.cd516a27.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-7EOmJ5+7TFnGwIvabajhKSZqOfqn4B8FVZ3isufma0VfVAy2IRTayLdYhm4LmgKyJdEJnzh8+qD375kSAhpUTA==","shasum":"cb1302fc68c5c1063f72409ea34b25b4d7549f14","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.cd516a27.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzJVCRA9TVsSAnZWagAAkvcQAJf3OmQCvhB4icdYkR1f\nZ3SacY3ORrddXnuerRqqD+RaRewqXC3l+P5eyvnZ1u5Ke6g5nQeFVV/dihUM\nBn6Kgak0EDdr5GdFw2RU/Ktxc5kZ4Xn0iT4NBS64OvqTij8Yl4JljuAFH7UI\n7RwN2f9kygYOYt0X/phNyTF/o8QtdhSVQ03D+qyMwNAZof/T4k9ZSBsgpkU+\nkH7OwdeXDQ9y4GGkMZ12b9Gpk2qIABceh2CP/QUuGFWHSTioWkhQxfsxQDIw\niSxZcE8SJ1VyGcR8YxUApPraho7Ge/6hK2wKSd97kzA05UgSpVncYbJE4eeY\nEA6JAG6VC7M4XTrwbPEW732jFB703IPulkJGyOoxKZyvxUfSIgXz56YFvPGZ\nk9d9H101/ZeN2Tbex+V8SZv3KnzcW1NqFO1PH7RIFvqpAABLsQNaJtit1xIN\nZdFr1ijrhXtJRZCFIUvZdaXReO51Umtob1aBwkbVLrHY50GbCE33mVdyK6ub\nW6GWWA4ij/tjDi20wxBFXdWtcEWogT+AU17dk3FMi5nWbG1QtXKfVSgfm3Pv\nhuWptTmENiqsayn+S//WODUQp0YSZglXWI56iNPvaK4gEOmzZ2x1LoWjz6ur\nQFK7JLl8cly+QMol2A0gFyp52WtZxnfzDUGzyX51/lHqdRso6BcznrXjBqeo\nIChd\r\n=nHQw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFqKetwXaFn1BPKTpmz/X1KwC62Izw17poxJpoX0gPGwIgMtbTFHI2kegtR/BetuccqGSLGes1IHGGSFAobzex5Xg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.cd516a27.0_1595617877068_0.47978975235967924"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1f082191.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.1f082191.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1f082191.0","@material/mwc-tab":"0.18.0-canary.1f082191.0","@material/mwc-tab-scroller":"0.18.0-canary.1f082191.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"ac40081dcdf0df5976402e0f1f63b1efef1f945c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac40081dcdf0df5976402e0f1f63b1efef1f945c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.1f082191.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-rTd2RFeHxlW99CprA3wNf1PzHz6LsiDv0IdV3EeKoHEYZ2nYBLUN9KDaO1ByFzFu3/gWdbRXk+R2dvOnQsBGbQ==","shasum":"8086ec5a4bf6bc9b0491cb67ca2f70e61f366aff","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.1f082191.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzOTCRA9TVsSAnZWagAAvwgQAJGqw1CHaYgqEUVoXW6b\nuNSieMCdCk17asK5M1P7aZ0OpikhM1YneGSJ/GOjgOIauQruo0mYSC3ZRL6c\n4wXsdClvp8eOVVfso02/52YbTr6xNCjFp2r60ZE/9IwvPKtdmf2v9++tgt7l\nB9CnPHBskAwFPKSxOzVtN+XvUY/QWQh7ViL7xMpd9X2gIuhV6QmfMurtAH4J\nf4RHbCQRd9HXnyL+bnnTg742ZwCGnoFC9IefJ0ZoQlr5XPNrWhjfUK3LpVfK\nsId5ucI3MeUQXc3kQpOGImwYk55HpbfXfRv8Xd/OY3BQSf7hJN1i5X26020Y\nhx2J2BpokzGkNTKQrtfRX5HjjzuKZutnRYBdRBho3v7na2s2jkIgn2UbkOhE\nWashAJjfyGyxh2grOwiwh14XWSg6qwQo8rARQ3AG0Im3EF0iGcubDJEd/GVf\nlVwvncqzdImK0HFdVW8ZhxN2nf8PQLkvcWbjxvdMps9LMWuLXs65I5D6a2qm\nbZFpZmvCJ3SK3EA06NXQbpk0oGzISy599ovWd/8RPVhmZ1btVxklMJPt58zW\nCIgF5BRFyQYU2lsCZ4aKG+Qpmke5EJgGINOGEqVmEeaPbkIwKL5Ro5MOJJtR\n1xJgyNjMk+4Ym63Mhj6UtyVWu6wVC8LU6PKG7obqJHjxxhwQxnUQwOyF30a6\nhzHy\r\n=Ot2t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICfvQU1Uu9UAzfRVfF0X8TUegP7h5fR9qjexG7v4m8/7AiBjIpS5p9jdAOIGJ0E+ZUCbcnfZyAENOz1GVqZSivxIlg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.1f082191.0_1595618195185_0.24735193991431714"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ea3e82dc.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.ea3e82dc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ea3e82dc.0","@material/mwc-tab":"0.18.0-canary.ea3e82dc.0","@material/mwc-tab-scroller":"0.18.0-canary.ea3e82dc.0","@material/tab":"=8.0.0-canary.7bd5075de.0","@material/tab-bar":"=8.0.0-canary.7bd5075de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"acc963dd578ca338baf9c6d33a6a341a215c42a4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/acc963dd578ca338baf9c6d33a6a341a215c42a4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.ea3e82dc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-P0KFAdzki9nmyxZCdc/MI4XRp2lOMGt3BULqv75IUQa38LnWKirWyEcMRn4gOrh06UkGHhPv0CC+gkKDrwN/ew==","shasum":"56f341ddc586a92e31b25fe2ddd05c5851226ea0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.ea3e82dc.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGzTJCRA9TVsSAnZWagAAq/gP/jo3p1hC2vA+FgY0M+LL\ndfmrZG0DcUPP5t1J5PZ0HuJo4KbPF83pavezrZGmIGjalj91/mEoMv7VUeOY\nfvszXxl8dukGFju7NBxyYLbNCTxWElp8hgic+j8pV8vVpArJk9cbb0Yh67ia\nStTxrk1FIuNPYEGwpy8tGRDUjsF1GixLw3phtIXPKuODTU6C+ahw+Tn4cCgI\nc4spk0aSFvFriHgrxG2ZlN5mDOXyR9gFozHU5/Z38nVCmk+DhtgC/R8ZMw4r\nlQpBD7Ah00cFBFOtOwVD69jS+ORf1A4lB16IFySqsE47LOEkuf5jMuCjiGEn\nc2ASB2lOLJNkYQ8LXMBJNy8eUQJ8dEMYgUnk3TnvfpqI34xNfrJ7iWl0zHM0\nbfK5CBBR9ZMtMumE3YlhpZZ90DNFJAr9eSxJgOYWFasZHjk0Qo9qyVaEsc7C\nX//wONEjMVzhqgA2s+Av7kayTnM1JKaJ4sixd26vF9E0vTrS5LOyuPsfvevt\nHkrnkBzT5UgofeMSxqDo2u0WrlUDSyWo4j9y1KTt3q8JOjr8QaMAZpNhIid2\nspXEaLP+PgfvnzFRdWni0TD1zm5ZfNzHoBD5tKbiR+U8rYYVmdvMce7HMvcF\n8l1B6wyGD7UWA3OE06L6HzixNmnQOtc8ZKJIp3itZGDtBHwO+FryHrpTjCOH\nOU6v\r\n=gsmD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDK0FOub38lyTyZ7Wt5rbLkzobWy7GTx8feRMYIzkI3aAiEAp5yJLbOD53EzqBT4VgWTSO8ZUxkKMaNVasPFpaZOBMc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.ea3e82dc.0_1595618504565_0.24953742898570908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.94987b64.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.94987b64.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.94987b64.0","@material/mwc-tab":"0.18.0-canary.94987b64.0","@material/mwc-tab-scroller":"0.18.0-canary.94987b64.0","@material/tab":"=8.0.0-canary.5511e0aeb.0","@material/tab-bar":"=8.0.0-canary.5511e0aeb.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"53896e3bba08752d5bf8b9c64423a52c96fc448b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53896e3bba08752d5bf8b9c64423a52c96fc448b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.94987b64.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-aLPX8FjvloBICzesi8e0GpNfTRhefPatHoVkja8YHPdlMHY1y3tazUegbhXVTvmRihgLQtHrwDpnd5ToCcAiOg==","shasum":"45d7e671de59599c550f386eb5f682640d8290ea","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.94987b64.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0QQCRA9TVsSAnZWagAAdU8P/2D07Kw7M8TbopT2vOqY\nJr/9qMB/BltDvTnjXiAYiqIgTVafkqnYykbRwwWyHMJIA/mh+46vYZdHQ4u7\nVjGkROp5gYootZwlgfUV6CgG1Anq3+FZtYUpGgXd/ZmHYD/Zpi9TGchd84/Q\n4uqVAX6czr2C487YIBCymuPAvWmOBVE/wjEBgU1aIp+2jTrWWmbwjeKznao9\nUfY2mLLH77B3jahcsUEBNXsUSK1hQt/f3kGboszQEc+pw+ehLk/+yduQS81g\nsSqnsFSbAm3RoMkItWaY6GtxkT4kDu50dFDXtWIAj4M3r1QWdqmYWY+DyfUv\nZG8q038eGewsHaFhyF0p3jHS+kuqwwvkT4P6rtfgd4LKzhWkzqnkQN9EWjHu\nX9UKs2BZ7D7CNJ3/7LD2wqWDKSjuyWanN7+qzGTBqB55GKQDtQhoOCcVliDU\nAigYegG32jSF37u5U66sMIJK9c8g5BHtUmN+59Y6KMbz6bnscJKaTI8Mp0eg\nA+d7M7bo4caZfcqNq4KgsC8A0fh7UKbfLDelwtpgafCJwPHqV6PGQtXruzyq\n0CWcCrnx1CkidneV35nsjjF+5E8Itr/EYAZuwrjqoqnEFWiKjCQm2o4jgroj\ncdl3FX6urw/eM0WLeXbM9QetHXqYMtf6ycqbcfvSdqBqhyPHx9EmdJOKu9l3\nwnbp\r\n=ply9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD2zFynIQ4UWo0xEklZczjevhxFDu2qlv+5cRKSFHtlMQIgfsrzBZ609sMmjelBcW3/H9TE8gjaitg2kd+Zf9UVp34="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.94987b64.0_1595622416166_0.1593968407119113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.ff49b7e2.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.ff49b7e2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.ff49b7e2.0","@material/mwc-tab":"0.18.0-canary.ff49b7e2.0","@material/mwc-tab-scroller":"0.18.0-canary.ff49b7e2.0","@material/tab":"=8.0.0-canary.ac405eae1.0","@material/tab-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"dfb6845469ead87e451744df01007d8532a7a5ad","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dfb6845469ead87e451744df01007d8532a7a5ad/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.ff49b7e2.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-GZrgpi86ID7OOaNYwQxoPz4i23s050UqkYmsIhjHAfZ+hBrtHiIBk0B1o6im1UPB6FRzLzZE5bygH/2SbbnXqQ==","shasum":"f7099e049c4e0575dcdf4dc2a489420aa0e187a4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.ff49b7e2.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHyVrCRA9TVsSAnZWagAA4VUP/j+uURnW3KfSe0v3V5r0\nzgegKtuXg899FXkSqgJL8kknzhZKAV9VdeRonh/HeKQHsvALcd0h5/ydWTJR\nps8dX3prTC1TL6KvH3yXpnOGaBr6CglNnh9YQv6HK082YoaB40jR8x6Oaybt\nRpMfwNl2A1Bkeok4fzXybmJaRkvUvWKIc4VK8GOp23cYoN2hFPww/lwhh8ts\nO69qSoyykmtwx04Vz+ydGbJST1ilCRtdCtlu9HkBAVgDygNcd80zq4uadiAf\nJDBIgGHB31YgUFL24+4DYbNQZsRe+SYCq9QuSzp0veVl+JKKaQpA6pJ5kkAi\ndf6LAlf4chbd4g9/jHd4IW5OGjbvca0SRXIXUHBMR+zLOManlVWx/qMYPr+E\nSwiGR/jTxwtpX132G2K/1APWBll8+9pYwgzHmevhJBqWzEFqfHObEq/kZ6nq\nuPKAjO0jLh3jPoRD1N2nLM+eLF3Ph4ZI4h4mQBjqR5V/C/xsSWv3U6Pb+ILT\nc5/5ZHkfREC22faJzgeEJhUZp1+9ESP+5KQUTIU7sTOTIM+QE3Z6+VuwCE/q\nQX5ziufKqGLtZJAPCGVIYZaLMsJb9MJ1Y5G8tt4/Rlwz6+lXyopYACklzWt2\nQwni1RmbUkYoeXUfeA/uVnrbEWJvgtW7jbD3F6PkONHVq9T9RdNc8btuItQn\nFZFS\r\n=Cq3F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDolqIWgmhiw6B6c9R05e2kALRoLo2aV7cOeGehM1EsBAiEAsUXHRW7Sz4zZJdvlwsG7WhDI+NJeljvzSOSvg1zMBEc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.ff49b7e2.0_1595876714689_0.7431633291140982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.3d334ccc.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.3d334ccc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.3d334ccc.0","@material/mwc-tab":"0.18.0-canary.3d334ccc.0","@material/mwc-tab-scroller":"0.18.0-canary.3d334ccc.0","@material/tab":"=8.0.0-canary.ac405eae1.0","@material/tab-bar":"=8.0.0-canary.ac405eae1.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"620788b72968e56f9d028ba5ef2ee7d1b4a91488","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/620788b72968e56f9d028ba5ef2ee7d1b4a91488/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.3d334ccc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-EujO2HKEm5urEQLj2FGdQEls/lHl0rVB6mSVHzk5GGak0+YCjVpjOAae4rNJ6nD9J7CPFAz4uwLzBhYZVBZFGw==","shasum":"bef721ce2eede5a49091936ed19cf9e7d8f63254","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.3d334ccc.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIE8rCRA9TVsSAnZWagAAqmUP/i39TftAthlcT9FBghV0\naw4cqS/JkYCQMp13y3RTl/CaxuShYWE1Fr60Ib7cMctXsp/XiPE/03sAARd7\n9mFr+/ebahWefUlcFryzGiyaB+QXhNVnpS+lVcuF0UB75zVxImN4o5IwxeD5\nCBOiPvIGuy5dr/7z70YHyrhO3h/4w6Q08o76MhqxP+Un6KCp+k75tu+kv8P/\nJlQ3Y5wn0XQmtb0aEZlHn3hFvmlbMSo5r24QoqMpLwYRBFR+tCiO/lRcuGu2\noRoeJxxc3oEjiI/1fbZ27selURjS5W624DKJ0DuLLsv/n55LGaByVoRor2z0\nZUTP2JWKt3Vkonr1pQwANE6qUtEURSM/IdDdM+sk7U+AZ2nb5tdUeJL6DcKZ\naWk6DLZP3NvxRZs3hMn7/Dut8RPBFpFXPZHSNHFYnJ6KKHYZ7BY+sT7DbVOM\nXpOO3m0YbvyvoSH1DWdgrm+ZH6TPXvjFtqLH9Dr8VWHWkeoWczc407HgAM7r\n4pmSC7ivcUYxYMStf8TpFJ+XjyXONOXgTm/xsc3Tl4dinedS/Xe+E5tgae+S\nvoZQ8Q4Jg64TjI9O1wNKalvr608geDPQ7qAg60xS4ztNTobPKSPEyql4IQTn\nJl2kEwnvS8n5nbl+ZhoJ+GLDljrzIv3G1V9HtMVHfFgvg207qKx67jZNYXMb\nR2ld\r\n=HXyy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCLxf6Mqw/ihgzH2CCTj4CE9Ps1w2k4tP+Yy62HCMU/wgIgGVUfAsOBsd+PIBwOikKj5SmsAfZ8aHDz/2l81MAuqOA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.3d334ccc.0_1595952938872_0.44714317119545344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.82ac569e.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.82ac569e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.82ac569e.0","@material/mwc-tab":"0.18.0-canary.82ac569e.0","@material/mwc-tab-scroller":"0.18.0-canary.82ac569e.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"0082732bc61fddf6b3c8f7d114839f1937e7d1e3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0082732bc61fddf6b3c8f7d114839f1937e7d1e3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.82ac569e.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-qYTs1YiSH+27NEyThni7PDHOVmRwZOnJraAac4UIBPSbmcB9eqQWQMGv9N5SQLFE1Lyysw7s0jikql/GMtG3Ig==","shasum":"fd6897264a54ff95c615a263ab74c28bf2d7def3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.82ac569e.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIHGtCRA9TVsSAnZWagAAabMP+wdkYkjVIci479kIK8Yy\nnuCr6SwhQMFuaI7XicXq1P6FgRC3YEDFAU7EXFjRViUTEVO6hlczQROKFMeb\n8pSONCqY1Hy09+aCQQcgzR8TNIkonXR4NktVWMJsGtNr8wQgTWONb2sPCHAY\na+V5oxH7lF2dxA+DFYfx6rNhbsG9weBhM6/25YRRmPvgVblHEheWjG/9bsLK\naKAWh0+R8UTqkOqAg9s4+OAXqiaVf5kHQWbg125m9XeQgncm7sMlgaMfGNyu\nc772T61Lo6LMWiDUqAHp5VWvhe2AEQBXDGM6PiojCIoVbkeXEMurgew6yJtf\nHERffYEl9vAvJb3dd72/xmKvVqMXLgdIbvAVMMlufcYkNu/9amVxVQWO8+NX\nXYK1UET3HpdEO9hvh8jOJUXBTNZfGsB+s2yWFtGicWly/uNuva3Wfihi9rco\nEOsnxdE6kUp+Up81g9+yi7YqPHUUgGmPtCoInjgtHnfFPFd45l44R7kBUemu\nA+KadEMeo24ECig262WU/yKItU3OtckJVh4i6I1d/nAhhn4AcuAt/JDBrX61\nMEtMIHShJS8nwtr+JRhI1tiUWdp31PuOK00NZhk0RJffmPr5NaOL/UcZoz/A\n3SVx7aVztCF7d3ShP5E7MV/uvMU5ALB01x03s3CpUUum5m5I/GrNxBB/N0EQ\nhFOZ\r\n=LNeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCgzmXWU9dK/6aCBeRRN4jJxQOf2gsGy4x9qanaK2z1cwIhAI4A40U+gXkJUpe33h+rQ5vEeOsy67/MnBdrxTTBb2Zq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.82ac569e.0_1595961772856_0.6875467810957043"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.99df7397.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.99df7397.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.99df7397.0","@material/mwc-tab":"0.18.0-canary.99df7397.0","@material/mwc-tab-scroller":"0.18.0-canary.99df7397.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"e236d384d23fb84c6f0db97495a598e8b374ef26","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e236d384d23fb84c6f0db97495a598e8b374ef26/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.99df7397.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-iQwq1YOAPf454wS1fSnkSxgy1LkXgPOmrGzrQNuTtCXWWDiKawjmeIkrRl0M7OVurSF4zlJy9sZxAMuWVY9GQg==","shasum":"c5f7d105c8dbfdd1c0778cdd0ba0799d877181d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.99df7397.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIOG8CRA9TVsSAnZWagAADDwP/1fwgMFjgMV9tYbYhDx/\nHTY7upuOE+aGb7n1kCQeZ5+Pi9BmDih/MNvn4koMcvlLvcpC5JR3yMnTUKGg\n/zZCYkQ50pGJ5QW1NXDtS92mC2adKCX5DOzYTu6cpOs0rLgYM1EkI8AEPxwb\nWXUo5NWofqy1GlaGG6sZWp58uWqdtyqkIun3LixabEpGZrBEbJdH6sRGVfEV\naLSZlCK+C4MycAKeaqUo50VPvmV3G3cyjbHoIt6FSKwlAxUhznnPEUxA269X\nFl2/ItwoN9CfPhG9QXKkRQkt4f2PuFRky7rN/loJEkZzoMEWehz89cI145/q\nB3Kh8wdoY62RgRNQPaHSAWa5ZPEZ3bwgcf0d/LlBUvGEi40iZY8EE4fwG3jx\n2FMAl40Rwie6BCTMqZ0KEgT//T42VjQbaIfwPhEXV0/shpveY+RBaWnBqQ70\nuIlXL+rQ0V/OL+G9DvJE3O7qb8luKvXRUSBQ+2w06b/ZTj19BExERuHCkJVT\nCm/gegkv9hgsVFibXwokV3r5QQh5zCKcPI1CPMpM/fmLpz9nKdgOW45J2yWT\nFq8cgvMuBHuvQ8K/egsckvz+AgV0usIzELYYrLciek/62AssKvdgSlrKQN2D\nx993pUJ1hisqdOdFLQNVkKObhja7hohWh/zDS06F1mjKiWbmnnetLeM1YTRs\nWZ75\r\n=b1c8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICew4OrOOsafRwdAz8Hq73bpu4dca4wuk3sKJ5pg7iauAiEAzupc/dq1ZORcg2fesj6aPaniSi4Hw6jKG7oq5IE0zX4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.99df7397.0_1595990459649_0.25709477047137885"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45493e05.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.45493e05.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45493e05.0","@material/mwc-tab":"0.18.0-canary.45493e05.0","@material/mwc-tab-scroller":"0.18.0-canary.45493e05.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"8423dd01198986c553ae23227667bc8148bb4276","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8423dd01198986c553ae23227667bc8148bb4276/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.45493e05.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-Pb2j/0ZrZbkgqxtmjGYYFibw9zcpBs/YsN2fErmUmKNS6wm2nGWqzmNhE0stkf7BV9ceC3ecFrAUNtcYp4dEAQ==","shasum":"72b81f452ca74e59a871400ebe90980087ba0f74","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.45493e05.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa8QCRA9TVsSAnZWagAA9agP/R7/auN08K638gcLG6aK\n2Ktby7/ai1Jt+YutGKbB/oIINndZ8KsO2zH+DV/jtb78Dx8PypOnXjviF7Nd\niDua30IdXMKrg2Jgzix5ozohMtqufTV+PlCZEzZjq7ShePHyWhBAEsYltXVS\ncear2e5O0u1qsfT9j2L50k7dTp7FdzsDZORvkdNTaMZ3TJ9aFRF0+dIlmqJG\nqVlkw9JvQDEtjpmOwa6/Pjh1gVuZjEUG1dF+U+zne14qEnzRX9B97dlOHpvS\nkJe9p0GILUZ7qYwFrHUrhA+jTniH6CYkI+sJou6ikkK2C4uN6EIqgYeUWpxk\nNtLbFquwrt8GChU0/ceDiJX0ypuryrCpg+gZuXu+BB1A6kfzGeQf3WfAbKlR\n2IVcZpZOU1b8JUvXMEg/Kb4+WfgSwlWeqgLcF7TX5jZDBFF93NHlC3uzSqCk\nduvKW0szHBpda0ivVkGsMAgVjVAR5FkvuheMd7j9pMXbOqHuMGbEyU7rdhFz\ndox0LcMq/BKLUVVX4xzzZIjDx4ynJnvheWMbYSaqGcuaz/JlaD/W72ZLMdTA\n6GIzYyu/vXul4hwrGjen2QRgfqhDO8dfAyMc/d+6d3UMs05f5L2VAPb4TbTc\n66K+mAUj4KigCC7mX3Y9eEbtvGNNhxcOq2fJn+4SGfwv+qEHefaRYRZchoaH\nVWHP\r\n=PVJA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAL/rlyQAvMCsjCbpJpA382NeCVV8aZUkGd/wCyzadecAiEAhE87xW9aVmLJWQjDWtsCPwxkky9xgKO6vKFBx/btqC4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.45493e05.0_1596043023876_0.9418088624303778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.f2ab0a95.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.f2ab0a95.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.f2ab0a95.0","@material/mwc-tab":"0.18.0-canary.f2ab0a95.0","@material/mwc-tab-scroller":"0.18.0-canary.f2ab0a95.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1009e1c7d365921dcbc3071cabaa20c5e21e65e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1009e1c7d365921dcbc3071cabaa20c5e21e65e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.f2ab0a95.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-a1NHffjdFulwoVD99E26K/a2XZyOZVAraOmiz8Rg9NdBmhQJWESaX4ANaMjNUqX1pkSllvU1d0++bUqviNbXdw==","shasum":"395cfbb33841f7b3db5ea969aeeaf593117cc10a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.f2ab0a95.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIbA2CRA9TVsSAnZWagAA5pcP/1yIILOFh8n3LJgxGEOc\ndm5ZVi2on7rb40aIK99am+tNp0Swo/WWTg1QG5E7DbZkIEzXnnCZ1o9A+Hi7\nLQE06Aag9cbhjcrANJiVG/A4rgOAsSPqcIFnJGLmAw/bsaC7I9qk/qd+7ESR\nI4BCr6HgMbNUQKZwYQKISicPEiQ1Ep6ggm/UxMXvtl+hsgvALCsfEdgQygtp\nA4biGBPU4ENxxit1QltfX61tj073VALqhzub4qdYBNU3JjYFkGgqdPMnSGgW\nXAaRuCRDUu9/Knnz7njM+FOG8OIruJ43Y9tsEV43TO61WK2/7uZg6E3nDp0K\naso97n4S4RG9KP60Uk1f/wru/7yjkiVYCUDnmrB7S67enHk2wDYrwbm43Tnz\nDPgTJggLmOU2kdpJdNj3FrdSWOgxQWeDiVQ58wxpsnt6PLJDTbBfZINJF7pQ\nx9p2VYwSRgak5ULZB/KGt74m4l4mDqwOj9LSllQA2eylcxnnrQBJHH8hf46g\ndAiN17ai3Rmw01y7x3/FZWRiCwzJ0SY3D9VIlahr3rK+fi13fKcQq1RLqmd7\nLxnaLiOiSzfdYLQuLe+0US9BZ9kdYYK0kg4VINohphvxqzj3rZcWEea86EFB\nJcZk6uQTQQljtlwlLaPO0C3+vyObAwcc8LWqDYszoDHUzSx2TaP83yRP2lwv\nm5f/\r\n=F9Gm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDQd33j0ndJOGaBwStOSVik3ra3s8+vl61CM2c3QbmnlAiB7koEmbD4zJig4wQ7AZjEN03ojON6BjQTnT6YIlB+wXA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.f2ab0a95.0_1596043318001_0.9833003143592534"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.45f9eddc.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.45f9eddc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.45f9eddc.0","@material/mwc-tab":"0.18.0-canary.45f9eddc.0","@material/mwc-tab-scroller":"0.18.0-canary.45f9eddc.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"1cb46e993882c87c3cced22481410b4922c1e1cc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1cb46e993882c87c3cced22481410b4922c1e1cc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.45f9eddc.0","_nodeVersion":"10.21.0","_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","dist":{"integrity":"sha512-tOOCPoWLleL7X22zq7uOJ6K4zz/xAsmBbeZK4kCh4xrRXK2nQ6p/jgLEeaE7mGxungQEoMxASjEJT56sWIO4yA==","shasum":"adc52fddb54570be1d11bc5d1ff2dd70c89a671d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.45f9eddc.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhp1CRA9TVsSAnZWagAAdGoQAKKh6JUqJQFiICzz/2Ns\nmYD95FgToVNKRHqUJotzT6mnoAIO2ottG9tuay4N39fxDUwrSLnMcpuFAuBT\ncD3HxzJbBgmYUnjn4KISvkZz+0SCqB8JpVsh1jmELcvqumysPFb7rsAVc60E\nIMOGMYIGNR071MfUlsKq1nBbXKPAfNn4qXszeRxhswq9YekE0TGW6y+w2OWz\npYS2AmXnEt6CroDzA+Y5iNidEweQJwNINsxf7hj+imfdR9RA4oObmh53+5JK\nYblFJsxXrldrZT0c9/WhrH8NeEajZSKDlfeWR347rj69ybG1kYV28NUM4Ws7\nnwu5QQvUX3Y7Yw665Nrd/Qn3TeKNH7VLDpwtFt9CP+dbAhgfwcRB7hUKdEYe\nxLLnvV//OlTJYd7jr/5luU4o+xLpP9bGKTDEQjxNetWpFwyn68hv53+DujEm\nYm+pmhAlkeiIhuJO0rHPV0m/NBmXiWe5hHnkR8rnawQycuiyT7GXzTfdgyRf\nS0qlobtDQAEBc87bs1XdZRCFKPMWSF8JAdu+fDcXzRFIAlpkd76S3s66diDc\n9H6HM8/IERPGhi2DCzp+R2DjgF8OxiTolZg3ks6PRbDVEoaOtXyLdn5qzZtt\nVW9l4A+gWiM5NZmJzVjWtti2jIafj0J0+iwB9R2AT+HuDicxy+CBxap69SbX\nsbh8\r\n=f+Zt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIES+a3mzUFqq0MzraBGxNZGprMErJs1cWCaoZROGTzW+AiBmTJs4UkIiXULCIRMp5bRDPzBCcR/j3DoD/IovD0a7dw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.45f9eddc.0_1596070517255_0.1846060712778148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.b64663ea.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.b64663ea.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.b64663ea.0","@material/mwc-tab":"0.18.0-canary.b64663ea.0","@material/mwc-tab-scroller":"0.18.0-canary.b64663ea.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"18456f1bd35a7bed64d6ca9d3d408d9d62d59c90","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18456f1bd35a7bed64d6ca9d3d408d9d62d59c90/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.b64663ea.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-lghiFUuakEqncjqEcVynNA/M/meHixATeHxI2RIDJD/HbIc8wXq2/I4tkn2rcZLYPHwEDkzR5Mp44bDEJUejWA==","shasum":"3fa899a4a8b71bc16e708392f40857bbc5893638","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.b64663ea.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwbNCRA9TVsSAnZWagAAHSkP/jEk40dHK2KymmdENEpH\np20IArtZ3KIShzS2sUfw0QwDW9k7RMON7sLozmhuDc/4OaCZt1zDboSHVskt\nwreK35UZBl7NiUyskzBvZ4M1vlUy6nDkfa7NjZc2TUGMNQyap4MOix1ScrQT\nytDrGz3nwHApAs/0GQiEZ7a7lnJUN3k86LNrxY64vBP9AsagtFQVOvRg/YMh\nTFO7TeR6hhPS2b08uBqHBXGIUpDqUwJ1Ibd82bsPtahwPvTa03bxGwDaqSQY\ndtJhW3zfjwZ0nEbPUWl5ItPGl/2wgtZDXgeSfR9fzy/fXonz2SCI05MdPqbO\nykcd3ktoc2BSzrnU4SSOgQds+uX6WbosZiqW9h2lEDsxDhI4M0tCDpS81hWf\nUjdWV5AtHP11ALbd3dL2JIcu6S+sNSUxJQ/bP0gCpwPOJCQQk1jmsnaeZa0w\no6zx5ySD37T6VgwzTCRq8nq0Mm4p4Zx1RNL8HhQ/Zzu4/Kk3MP9xeHo0jjpF\nvFC4b/JPmojgwLMu6Czet/hU2ZSsTiaPeyPWsbQFKFHsVmyCfOq8bgsSrWCJ\n89sjk3QlmiscQsvmRJHUpVjkA15tVyLNyT2u+E/A7i5Tvryw3qjqdR6QHa30\noIgFxXoy9ZQb6I51oIAIHPsxzu+86YNRC/qvueSxeedNtI7D+z3drOVEXR5Z\nOoO4\r\n=X+hq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQKZWBzu4Yv+QAmGvMuGjPGfq2KHK14ADmFw+OquIDJAIhANK0wZ6iCtD2P6wD8UqSH5a3Ig/cm5gJv023nYDzPS53"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.b64663ea.0_1596131021330_0.5635691468428288"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.9a1a4d2d.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.9a1a4d2d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.9a1a4d2d.0","@material/mwc-tab":"0.18.0-canary.9a1a4d2d.0","@material/mwc-tab-scroller":"0.18.0-canary.9a1a4d2d.0","@material/tab":"=8.0.0-canary.f86f83f54.0","@material/tab-bar":"=8.0.0-canary.f86f83f54.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f3382a4c5be4b9d21268b2d1b0831f8d8343d2c6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.9a1a4d2d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yjKLXpTBaLBJz+Dphh027s80L8vxROeFSSecmUB/QsCAadmXje0NBABOnOTH8fKfdG/+uhjy1SaBQCfgoys7Kw==","shasum":"a8c17f7fb7b9e12da7f8b93c515815b107ec4290","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.9a1a4d2d.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIzXsCRA9TVsSAnZWagAAbj8P/jhPN6IiCHvVHWYo4HKs\n56k2yxHMSTEJinxlUnshFWMEk/nEMSyfw99WIiT+rc/8Dk3oij/O5yQT9rls\n3C8/fCXIHhkKUwNpNSeRbVXOtaolSzyvTRhrda+6T/y5GmHsRcOrxs9M+r6p\nFXMECUgiSG8o/FIUZVDe7asGTZKiIjMh1DbDtpaLAugKIqnCANoWXYQc4H24\ntIYh559O173HUD+EKRDQ5udoh7SgNHmzgP/O3Ys1iuALTuauCOMTOpP9XVIt\n5WJ2qFqsGDaHhwGpZ9aioVAA1o5KOZ5zvmbJk/lnX+pe5i9RrPh5nQhy7jZZ\nMb6yqfVe5GxJT61zQL//enS5EMmmZC9cS9iO520EvqNSnNPlPyWAmbP0+R9B\n+BZC4a8eHte1PHhpsgSn1idBnG38syMhP2hyW+J/VslDXlnuMoCzD9sIxNOc\ncOkHePHElPVimwyR5R4km6J7lWmJPcd3uIARkTztQZ4BJ/E7QnUKoOXhBKWP\nPm1LK7K1ZO5ZTSLDRQ581u0qDBLMmUh5BhhhYuQPQy6PuLZ+ch1ln+Rv0P6c\nKbeqbe15P47KD8sR9FlEQ/LOPJFsXkAgzSBvk6D5mHPDw7iqTmH1v9v4Qvp5\noEctheZOArGIcWb+ay+r+TE05Z9yPdYBqICaCU+KaFgS0azxQ1H1KFHGqMxf\n61b0\r\n=pJfM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEo9JBLOnagiCCiPRP1KvIXvuafsISw4qCj3BG8Oc3+wIhAP4zcIIGO94hzQFywLbtYTEGbF/5rpOljJfmJ7BXcMTc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.9a1a4d2d.0_1596143083681_0.051775716199564004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.887c2848.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.887c2848.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.887c2848.0","@material/mwc-tab":"0.18.0-canary.887c2848.0","@material/mwc-tab-scroller":"0.18.0-canary.887c2848.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2da757768e8d58aa4885027c78c58f8515382305","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2da757768e8d58aa4885027c78c58f8515382305/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.887c2848.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-gMSWIXzFqVIUdBKC8CyDsvP9V47EtOAwcVK7W+cGgSGfB+lYm3tE76uP5dKTXhABfyBO0l+32zkK50y2hBn3eA==","shasum":"2b4b5d3f22218d1533ae7c9a1f0b2239e28d84ab","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.887c2848.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI0RLCRA9TVsSAnZWagAAxAkP/Av/3PkHINEdqysyDSaI\nQYMZLhFbYsVyuVWA8v4h+tQRTf5pdImOkPWvorRTNwC4XByWRgWDUZWmHkN5\naaVmfSSjM06yCODck7NbDxkeD5vDKXRgnNzFQwNeA/bmzoCLwtAlNl16q8NZ\nwgX84qxDQNoJQlOmjFT93Z8DQbdb8Q7E3DYZ/cKVhu7om1Jnf8Zjanduvxo4\n43HXVrAxWRWS/DqAaEYm0dBN83D0eG5RcmrIhL2Ji3ozzZbhy3U9EdCn/zH/\nff5c6XiMoB6oL1CR3a9ubtByfxeZARc8Ze3EPctu4lTSF3xxS57gbvulshz4\nstPlzPjUL+g9AjX3EoBbBMEBEck8GTbOJii4sFPEfFTb3c2Row22bI7/GbzR\nJHZ+yFZ+eVShAWfMS3IGnf/llU89WB6DsUWbuWfS5jB7JHk/N02UjC3hGHE5\nCABI1FRZEfMaDmhXFGjLaB/l2Hj8HTYEzVU7z/exJJ2ZsBe5kbesiMag6z44\nZoeEdpTLqkKBLyZbAZYxH553MInAXlCt1gBskEnrWxySSL/kho3kiJGG7fLD\ni9n9ft9S+b9MiDGSCwBk97pqo6pVZEGEDh4Fzqz6/RdtHK2SOq/C3oITbI97\nZ3qb01XCQ38BDEojDEQs30iFsNe6a2z8u4EZ7VX5f0pmgdRB2ZWm5Q7dDy0y\nhCwy\r\n=+zN9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDL5SnaN19b8DqYichbo+Or+42RZDmT/fs9BkAL4/gPrAIgP70w3YPO0vy148yYx2M/1N9JxSfTMbQlqMoTtrwrjuQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.887c2848.0_1596146762646_0.5731531936527652"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.354eb695.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.354eb695.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.354eb695.0","@material/mwc-tab":"0.18.0-canary.354eb695.0","@material/mwc-tab-scroller":"0.18.0-canary.354eb695.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"75cc944c1c31dc88606fa2007d002743354e601f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/75cc944c1c31dc88606fa2007d002743354e601f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.354eb695.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-qsC4B5KlfgkcpmjVSSLJ75aFkkZwS4XAvyotbYr9MuuXI8r8xKMPMVmQcEZDeFAgNBYgH9xU3L8scrgciBnzvg==","shasum":"1f25c2d4b480bbc2a307dc43b8f70fed28fd2206","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.354eb695.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI16bCRA9TVsSAnZWagAAx80P/3jZWQE3rhE4diIG6lvw\n5wpu+9eTOj0PCUP9yMp1gTUDWWajMcReaDYO+GIvpvX9FFenoxzrM4kT4oq5\nVJLMTrRGAh9Fv/fZB60GWPwUyFWUfmFvUuMpBuoTKyEQhIvE1VN0Ob4YlQe/\n9pzKclcVIm6O1BQNSOZ6dKOLz9939BXvPq6kzlTi+v1mGYNhGUBlT7kUS4yM\nLYDiTFjuQtQwy6pJpoEz17BcpU/eYDDTYO8xLqG4i2yXkMqL7B5pSB7+hqHF\nc2V9p28dYhtyzSNq6y8KNsIgVOrS/Kah9WkzmmLE0C4ARHrsUFIRPydEPd3t\nJR53i2I18L8L+X2ftFom+RlGRn+7j9X4WypqUHp7l0dlfM9rnBZpotp0nIdt\nnRyyv/h3+1/q8khc4SDkDwoWAacdZUtFt2H17IgUvPPD6UNtt4ExPflFWkcY\n7mRPZ/7r9DBEeRCuw+mRaMzjQRQ/OeITBAsaovDPQVxWEbdY4wbuz5QECV5i\nlvgoMkff9YHI5vbYdRDAAgYSD0wp/BPvByV67ZGxvcVbfMh4zlXCPQEmi1lT\nP0r1fN/VGRt27Nyd+FVuSPyZ2G1kgV3uqOtvyWJzJf6L1M0LVrr9S4yVkTIL\nJsws5EFj+NI2tFnSTKjf8qrrTS0HtFf9I2k+EskN8coWIiHii72PK0xEAa+Z\nf0HY\r\n=xUQv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEr5Mv0EzI5Qkzv5tAKtU2+5LS3yGXheF2srnLT+eGdAiAcq1t4WBsArYWz5D/lvZhQi5fjtdj7YRWvj8O4maBUgg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.354eb695.0_1596153499310_0.24608714935601772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.7beb236c.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.7beb236c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.7beb236c.0","@material/mwc-tab":"0.18.0-canary.7beb236c.0","@material/mwc-tab-scroller":"0.18.0-canary.7beb236c.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"9cb1508b49b8ccba6072341f23bae1ac67078621","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9cb1508b49b8ccba6072341f23bae1ac67078621/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.7beb236c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0h2/xlopfq26G5Ft0Zi/EZ4eFefacqUq0NuMR591K88keJHdRnfI8AOtME840DFrTNM65d+qt2tFWRWCJdyd4A==","shasum":"42a44925a3329287bb8cd72b3de73bbbd70771d6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.7beb236c.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFesCRA9TVsSAnZWagAAXXsQAIu0OTPEcPBfs+WYLTcV\nbb+LAC4k5zHucBy3OMDMmrKs2MHgucW03Ifp1wapTw5B6lnidVIrTr580mx/\nQQn8KNJaa3gjpH/76hmzHjvDiDf4Lq/vf8QWGJhlxl9+P7dg0K7CUM7zcdrO\nmzA6xa7u+ul3RsrftUijl5IsII2Et44jMCa/4HI2yUId87B9aGOaZNcSlvKi\ndXwnjKdQhua/UL50/zW7T5aqfNADBWmcKcyKInsgzQiplWbbc+Bwp/EM5TXJ\nqipegDDJx4P8VrFWBVh4ir/IUj4kkvuq/dy0Ud/C6P/45MzPVT76IStw4DQj\nipmpWpdMJn03gmGAvJqou2CSNJ52mTrjklMFOXXuMQZow/I1LOCVCzgSeHOg\n+oHq02ZKszA4YnolTZ9bPnSJGmK+kQn8DEElIgjtjBtdgzx6hGrwg0ahtnup\n7IbCVEamtZGUiAG0PziCLOljKUIwfk8BF020PpqPm2D379ZWmy5God4u7lg/\ng8sq98V/MYnxLld7hRgmDSLVVgr+Vk2rIQHvlLJ0fbaE+BwBu3i1kGsfJ2hi\nTfFXere4QayxIORoZiN+3nxae3/1TTPZ9Zm8AlONcwxt1j4W6cefQGY7afdT\nKIxLtwWUKodJfUJDS0wAyrm1GNA1jRcCqMu0IFA2/FEnlZU21Pvh9m007q8S\nwtxu\r\n=Az1h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQpTeaYgPHkQlhzzJs5IQgj2vKuRmOUcymrgRDaE6bhwIgTAAKhmY1RcrzM3z/MqUg5wawfc9/2oZ/nPApVqAjzOM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.7beb236c.0_1596217260336_0.68628348640028"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.c44acc0c.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.c44acc0c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.c44acc0c.0","@material/mwc-tab":"0.18.0-canary.c44acc0c.0","@material/mwc-tab-scroller":"0.18.0-canary.c44acc0c.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"publishConfig":{"access":"public"},"gitHead":"2491ff018c9a71195a5e873fa60b912085ec84d3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2491ff018c9a71195a5e873fa60b912085ec84d3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.c44acc0c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cvp0BFqngBw7T3IE9Bo2uReWBqXY+BSaY7N90/4h7o62WZeW83tWA8FGhYkhLuub0U6Lz8d4sJw26eAZwnOD/Q==","shasum":"f1f5e24b20957f066c2a03db581aa82c5ce852bf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.c44acc0c.0.tgz","fileCount":16,"unpackedSize":54151,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJIkICRA9TVsSAnZWagAAnQ0P/2grtpAlYcOhM7KZzmLJ\ndBXW77rp6dHNhG9mg2e5hKvSenoV6ol1xtnmPtrmSzvpgEzo2TfFpg1asls7\nZwOjUzMZ9c8WLhyKsgy/wStuLWwE6zskvkLDzqRSZIQGnG6tZCgcC5FyMc1W\nGybWxG9Yf5bC9z3mKBVhWXlP4dWrD0otCGXFbxUI0Zyg9/KqN+CEBQkhYuIl\nrdvMA2j1W+cuJjeGqKUW6qn1COEtWHUt9AeDtsWxZbeT2XsGDi1r2MyGw/JW\n81NnJQl4negv6k60miRXYCfC/v8hmvqI20BIb/1jvWitvAMAV0IovUWg1bVq\neCv3P7cdmhJDlcVCZ5KsnuaH1L5tChlRtNJdmay/dLfxlmDA4W+OSjLsuXSk\ng4t8HAAghN4CxKWRnoXh0qpwpLW3P6iejWJGapqE/2otPuHKF+/fc1W7iPfN\nM+X53AtO3t/HrzyEZH/dTG9cfZ9Zr4B4mpSXjG/Rl6E9GABOGwVMj+WR6G8Z\nPRusfu+cUv06lcHplezJE+bTEgjsbVXGh/CQm6rLYaMm4/htex05zFdEsjQy\nx5Kh0tVZC9OkkB02+jcwrHDygyCt0c7ps3YqdKk5n6fGDL7zlk53wTGeBrWI\nNGI+KtG8t2xdwys4ndfFwqFjOeP0vU2jSVfUSU1oWzfeMDdlkdcXP+A/5lRg\nIUU6\r\n=dH3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFpKyGAfCd2RKYpi6HAhaCsURHb+8slAi62GWle4FmsDAiEAwRIfsRaQpK5rvvlBkslG2rD1UfaK69x7TI1CSokPyPg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.c44acc0c.0_1596229895956_0.8653425165710904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.779853ff.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.779853ff.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.779853ff.0","@material/mwc-tab":"0.18.0-canary.779853ff.0","@material/mwc-tab-scroller":"0.18.0-canary.779853ff.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e06c13898d0c9fdc7cd494c68586a55eddd2d483","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e06c13898d0c9fdc7cd494c68586a55eddd2d483/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.779853ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-TlmE9Ly20pzdDJK5kh0HjIMHpfD/uxo/ZAM/M9VKxDMx7tQvaN9YWMHKlhWWy1wm6inb/4rEq2io8BQgIcAJpg==","shasum":"f24b4b35235be299bca07e969bc02bd76c53ce81","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.779853ff.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKEg3CRA9TVsSAnZWagAAe0kP/jsfidD0Jyv6m1dao1+2\n4tAJXMAGQiQHVwEhq3qyEGpCovfLnlV+GUsX/3gaMkDO+3/GLPZQprlIBN8G\n71032VI4HxSkp8gx31WoJUDpVd45HEOeRj4vs2OHSWoFOHRKNVLLD2l8cUa2\n2S1B3Bo2c1fl7THlCPSXErZplqg+Wtm4FaUyMNZTzIsxKVoEWPzskGee1smw\nEjT8f13IlTMR8q9vYsu4Yn1XbsClKNWYI43NepKjSncfmIkZhnUKNllPFiF9\nN6sGNSDOkQnu6bTR1p8SKMBfDO9sPRjXj3gQX7HzwKAdMKWZVigHP7ltQ4ij\ne3ZS9r0IxzSWPuu96b02KXFsV7EsY83O3P5KUFUybkok1jdF4gMxXI9V3kl8\nYOZ7vs4gMYH49rVHaZJhrZQ5QDlsv+SwMkP0mTvnosRBAEYUANJKqn1u52Az\nicaGT505WZm7zHmgz3YFqQkpiiPAnbhvGUFSFVQRMjGkmpgp6u+htREcu4VD\nEpVn0rT91tntR6U84ghiepXgUbICTHBBFDQti4sdO6Dd0f6hhKTgevsyTzbZ\nBJww8kjnh2mZe4SpYMp4ITVY9k5vyZeh7doO3JzWLnFxEzLVEQUGb3k1tmIa\np8/8NrR4rZHUo2c2A55xsRJWsRQd6FGyrWHzvUNyEnklA331vdUn5J88UdVD\n4+Ld\r\n=yyWO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAepX0x7WoJn7ahRF8McEWaNMtWODDQqIGWAXH8m15JsAiEA5l4pU9kTGSXQeEmynBaiLiV9KXJXZ2fwhmLJQLbwg/Q="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.779853ff.0_1596475446882_0.4136052058675921"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.8aaf270b.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.8aaf270b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.8aaf270b.0","@material/mwc-tab":"0.18.0-canary.8aaf270b.0","@material/mwc-tab-scroller":"0.18.0-canary.8aaf270b.0","@material/tab":"=8.0.0-canary.74839da7b.0","@material/tab-bar":"=8.0.0-canary.74839da7b.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e119651cfd9ab60def67a36255b4ea0ca1022d37","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e119651cfd9ab60def67a36255b4ea0ca1022d37/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.8aaf270b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-iJE2Dzvuyd6Tctcc1Cwgl0icvlCb+0fQxIS/XhylDs8VyPGpSQzgnSaMvIbRkKNbUq6SjDiFxmKEplqVK4DLOA==","shasum":"80b3697064ee24e4ecf587d519641e88b098be08","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.8aaf270b.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKFpKCRA9TVsSAnZWagAA06wP/A7wiHLa67DL8o8prh8H\nECXfsIf4skQlMo/HBQPn6xwkNbFBEvR8BDcc8RNfM3NbZx6RTorzHA5LRUQz\nIkZU5St5pbhnFad/6SobFYF5hLJGveCgFR5D6HCGYQsFiddILTXP9uqwsbut\nBp2luT5qEVWgdrKh44ppJyD6JqVJWppHgB5XirhnhSDyuCX0MfapKquHF+1w\nt6Jd0WgTC/DKqG3VGLcDWsEBoaLYRvSyjGboHqT3ZwdVpCsOr2MyqeSrtU1G\nvvSXXNpnHxh8R/7Nd6x5ZT9K+7uuto7o2lxWVMW4YKvQXDTdpd2Fq0WMFDVr\njwfQkdYT30tmWsBr7r6vMGtWe5T0ejPJ3LPBh/Y36RZGHyo/qjcCV8KAFWVg\nzq3Ai+oTCho+6twX2RdvAGJIAWEhVexMiUlS7TELTttmi6eUMOjvQYqnl0Pr\nzl7MU/2wAMiB7mfptcI0hZ4QiJl8f0o2WUsemVuifJAPBdi0bEC+m6m+TeBp\nD67CMrbv/KVLzKUTjZl4M6UxuFfj84+Q+t1tPYboLBdJ0inEXOEYZ6oWcZyx\nnsjVAfd3MRY8AAs3X3MCokknLowN4j+85xn9hS2o8fRhKPmULhCQZiM4RFYK\n9FDatiCST/ke/KCaDi3trLaT6X+nRPE40IVvwBgp4AYb+BRi51o8+L9QqVLi\nJ5Je\r\n=SwLm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICIb3D4jaVZUaj/+qKUtiN6A9uDaG0qGOd5PBXZQ3nzxAiEA3U3DO6xu04eE8u/SBwlAaQVcdyQ5PB7QPEjKaWjAqpo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.8aaf270b.0_1596480073624_0.4206598583327039"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.5cde9f12.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.5cde9f12.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.5cde9f12.0","@material/mwc-tab":"0.18.0-canary.5cde9f12.0","@material/mwc-tab-scroller":"0.18.0-canary.5cde9f12.0","@material/tab":"=8.0.0-canary.5903d39af.0","@material/tab-bar":"=8.0.0-canary.5903d39af.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12da43d72184f78a2245a6686a1ebff3e7bb03e7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12da43d72184f78a2245a6686a1ebff3e7bb03e7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.5cde9f12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-v+tpmXVAV9CTNNRJ43sxLJMkWHd0kfEBtk1g2zGz1Qwsa6w1r+a9cKDVYfheNibNUD8clj/58xLgtgvT40iF6g==","shasum":"a0c353b286f145755def508327b8cdd88b764b42","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.5cde9f12.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKF8TCRA9TVsSAnZWagAAk+0P/2enoLIyA+TbjKo9fiH6\ngKttms308xQWRuXqg2g7DIog7MpKg+csYJxMeWZyrlWtjpPLrhLJpXEPuKmp\njpraDyYnkwcorjxtNw2rNIU79XA5Eez/af3SFb/4pHYvU9w1eFwZ1qJNHKYq\nXYuKmALrfZiYeylLXMDhLjD8YwwVL7Vb25TCpAPxEdLyIPnaCN9t/4LiZKtM\nnUQvQDQcInXZmQfuJILONrKWnqx8WtassvxxjbTaxVb+efJ+CYTPXp2Z9uoR\nrbs96IIXMx3tytrJw3ypCzFnpHnobFo8L+fgusnQdeNfKi4PyouphbFmbYVa\ngJEdQRjx8rRC2PZcSnbq/+xWTR5q3HocLbcYcz2XJQG1f7DM4ZrPbU6r7Fye\nh2VfJSWYFn54LEfC17vnWPnqSMpD3GdTsgjDR/XQ0zjRry2W1e9nA0AnvTEK\n1jr1suz1DYawDJYgpIsADZ7UFvnxWAIVI9u7KierucKaBKsFcUtmcmtsJy3g\nNEyiRlYjBOgJRCy8NSjjTq2QnHzCYaqK7054RbcosY6zsKL70ljlQRIlnZCj\nlkNYS3uYxPOLmc6EeUMEGqmj0OpVDOGIv82X0lDD5yWsXUDsZS7Ja6ooTpoe\nSx86QqgOYOk1tJ1jwUowrvDTUhzUqx6pZVWxa4R07YRD2FwUVAV2q0Ph4SO2\nWxv8\r\n=9Ph8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE2vU7T4kX8FfBX2F/RAdMv8F6IQQzOIWUSLz/RU6UBDAiEA1+aV+8Uu2ALX8CboMezEOl3USobrVx6K/HsQwnikctQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.5cde9f12.0_1596481299257_0.5639650558498759"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.1607ec53.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.1607ec53.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.1607ec53.0","@material/mwc-tab":"0.18.0-canary.1607ec53.0","@material/mwc-tab-scroller":"0.18.0-canary.1607ec53.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0ed0cf9b8288929f621c044aaed573575e7f23ae","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ed0cf9b8288929f621c044aaed573575e7f23ae/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.1607ec53.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Hu16Yl5yrJRZ29WP0PDKEIMS6vGmLKHijhyhZvMrgjAiHXwsDcvo80kEMN/DXmaEHRMuP91SG5cRJ7I2xZkBng==","shasum":"6ed3c0dbaf2adbc0230f83a8d1bdfea9c43a909f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.1607ec53.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGnDCRA9TVsSAnZWagAAC+YQAJaF6Z+EDw7LidDxOEZI\nnUeCCr/omLcPWHWEjylfEphEncVVRdVp/h/HM6+/G2ktqkgaeQVNBYcebM0C\neuH3A3gP0JGiGpHqTJOXuajFKRGBeqKdS2Azkexc7Lu0wG3MttkaAJtQ7RMP\nupTOaugoB5ToNYYvFufyk/smU9rEn5QgjbQ7Lq10gTzXJVQ+m7F7xzZjriPj\nDGyyc/zIW5gn39jlzOVal+8qo00lgjbu4Xm+o2zIf9V9edN4W+kyWALsCn9Y\nFi7DlaIYqu3URzDK95xUgkkvPCGdDLcCdgVVnJCWL2xIkN8R5KGVkxw47Oss\nm+CrJFAuj0mD5J4kNzF5q93cFgYM/aTBLiXDI8LRgXhqns9ywHfCTVXK/vwj\nm12pZ3rRmGw7soya+Xd8W1MWOW28qj0cmZr0iDScTMpa05izQ2q1N/WE3z6C\nIri8ekHjeVfFN6vhNAew+C+tIC/Z8eWVCVrOKzAiboziMSh1/CyKIZ9RbPqI\n9GeWWU5KEraGmyVZMTrVZZRmzp0Vd/PZ7j5W5T1yYYN6CICYuYUD15zUGLir\nE573ooKmWq+BH8CBV38pIQI1FRD2Y7GWNPlhojZYmjANRr+s2r6sVJDkddEt\nbRgvBygjczNzJyB0lUKtz1vzClxUlWRu86ej9Jia1C5/5UZsRq0FQ5ZxOG6u\nYqod\r\n=zXPg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFg9JJeGfFXpLUexzb1GifFGofzV9j0vJjclvwj7EVY9AiEA0eqFnKwEBEcaAiL+y4qiS98jpzxxJMsyQK2NZ0329sw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.1607ec53.0_1596484035424_0.9597961124489907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.678b30e3.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.678b30e3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.678b30e3.0","@material/mwc-tab":"0.18.0-canary.678b30e3.0","@material/mwc-tab-scroller":"0.18.0-canary.678b30e3.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"53d3656f4039bb116e0f771ca0dffc41b500bb59","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/53d3656f4039bb116e0f771ca0dffc41b500bb59/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.678b30e3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XreBkbi2/eF2aXC9hltsZGAX5YNQYFVe2Hy9A6lO/q38+m1snZqUpj1lAYiLSArlluGp4n9dXI7/dyoooH4QYg==","shasum":"a557b0dbbd7bcc63c7a6f606bb8adbbc6ef21e39","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.678b30e3.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGqpCRA9TVsSAnZWagAAbPsP/0U4N2UzXQTqSNpHOBni\nMBjY5giEAnN2om6FoEVzw3Iw3O9oQuIIvrjJirWrWepvDcEgmpAI5APME2X7\neh7RA2ZYw3HzHnbPyplwYyYEOjjmDRJrcV/KG6MwuLS7tNftjC0AWvP8OgIh\nulchpg2Y7Z98ZJs5FVbHz9HMKsxAXJiavQ+qSPQO5voj95+LGaw8Rw8h+vsX\nRwR3dJZxE/3gPtdnf00doN+xeHECs1/OCpOyNqybdwwEvJh9QPmEBuMAWR4j\nbQywPbuv2i3kHoPhSEhi9l8ReYStzHtgBnDmPbAdyP8QVcXiigssHVTWOY22\nhItrbzOw4Vntzsv+fJfbhayyEVv8hmJ8ju51WIIpAsz7W+tGrScIvHcj0yNr\nY8N1Mt/FzSC3P25rGpX0bs7CkbfrGNyC7RhwSCf7osUe8bHKMmsoyy/XMJQP\nP/QjbpEzcezLgoy33Bh8v2mpnHrAiiuQYdXReELhXqYA+XP1dTh7bUf7pXr6\nMd8Wj171hOd+WQ1DIrv3AGfPdtK+noFglBCNoDmtanQd5LAq0dp8uz143YMg\ngYHit/nNpH4knMz4yPLC8jk/huz3KqJ+ljZ4llCsmlw+8Jf/m+YIck07Cae1\nflYw+FRmi4wq974M/uAt6gwBM3wOut2+EQTRHHnRu25b2yGctPTKDb7kKBpu\nTWy9\r\n=rvg6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF85lZ2VGGATpMgPOQPjHXAGaeAyYldR54Tc/vQD5cNXAiEAwVHFaDE/XmDliBgWQabUuyYPG64piSTE1yrjb5hGVac="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.678b30e3.0_1596484265213_0.8441597790727571"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0-canary.21c55569.0":{"name":"@material/mwc-tab-bar","version":"0.18.0-canary.21c55569.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.18.0-canary.21c55569.0","@material/mwc-tab":"0.18.0-canary.21c55569.0","@material/mwc-tab-scroller":"0.18.0-canary.21c55569.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f46b7dbda996fd5cc43abfdb42943515aaca08","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f46b7dbda996fd5cc43abfdb42943515aaca08/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.18.0-canary.21c55569.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9sffsL4wRF2OGYdbw4zdXcE+ELSgfxLetgMfkogKMtw2sALqQ4d7PDdDGvxHWSDxXrNtsxCucqPrj/pYp7KvVQ==","shasum":"706eb334ed0a7ff8eb3312c7f0f735140f221d35","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0-canary.21c55569.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKGwWCRA9TVsSAnZWagAAy60P/jqU/xKHchC/Sx25JeIC\n7bd+7zSEXXOwRjsaYG2LixT1IbZqv4FexoVa/LRXFt0tZ+7JwMkNhYrdft8p\nxy3hq0HKIG+XwmybLaTUGCd0PCBvCxC+mFW3rlcx0b8xo+TGqSV6iKUtf/nC\nG3cnBP+SJoVclQRclJMWx+7/FLHFyvuD2GWZUh6tM3LN5DV2j3E2gXb+Q5VD\nQJ/QCffM7iE5Yxk6qajTUgUXk+rzW/e+C6WCiggBCPLddNZif2uN8U2y4+Sj\nFaTH+y9KuOmutDtwTa/h6t2errP+9BXlb7ydtajtUqUPK9dgHm1jDb0NmLFQ\nQYT12ED313YMYBxfHcF0yUgqondDKMY6Di7bbkq8f+D3i4Vi0UnJk4/FCy69\ntKlVuaxFd6B3H6g0pfVhTJFyYGowPEQSJVdLuJVN7Q0z+8c8a1axXNxt9+kE\ngc5mZKlmSOawfOTJXTpyfr9zapw9VtQ0qWNJ97vw/7bh7epc6UI2JZ+h6ccW\nAe90A6XkufOs7z9w+00OrMqPW3FueMT4aYedeNeE2SXXR8sEnTfz/ntJ2w5U\nRGq+ou8wH6xZeBQ8uju+RqkpxFA3jtw3l/MPQ8N9PWBiWqLWrheQ3t8bzRLL\nvArFZLlkHk4Lr1pahCUYhs+IICXaqV+Vpt8LMHPMetMDKMn4yfxDHq3zHl7R\nLiMQ\r\n=jxUz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBOPonx5k7lfEEyfEWuQqn6307/H7bIOi5kXqSGQrpFtAiEA1kTXr9r6CeofDzG6sIWII9a4BYvtZImZWi0hD2ABOng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.18.0-canary.21c55569.0_1596484630216_0.0007238868248229391"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.907d4d7d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.907d4d7d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.907d4d7d.0","@material/mwc-tab":"0.19.0-canary.907d4d7d.0","@material/mwc-tab-scroller":"0.19.0-canary.907d4d7d.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9bc2fce8a40ef8eff9b7444030f3e2a62cc1d8f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.907d4d7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-JEdLKTYElZOD4i1c0I4AXjre8p1dc/yDASEXqhuuyiG/+J1gDNUCEAivmDpCheB+MjDEhoGqZPODg3gGrkbu6Q==","shasum":"ff3ee1c311fd4f05b6ff4eeb9823c969e987d23b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.907d4d7d.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKIAyCRA9TVsSAnZWagAA3YIP/jsgBHgN6/0rqstw+qtO\nvcgGOKn8KZoZVvrhQJzhiJnubOVZ32/s0z91+NKwNoz4mWc3YuproC+4K9nr\nXv4ZD/ZrrtCdcz1HhdGE6dtkSBoVCObnDoXuB4Z4GP+p33FXrjnn4S4fjiFi\n7lknFMfz6zvgAxbrKGTLrcMwigFsOfPMuKeIqpOyEAyLAdCiPgWILnZlB2EM\n2Hgm5GsaEJ84zDX9VNAjKGPPmyMWz2JA4HmOLhAHkGGACKX4bpBmeiDk/DRa\nUMoGMUQhgJtSOuRLju0PIcN8m0dfJNoK5B6aHKtyTl9YMtUxo18kLTD3XRwW\nlOaVVANUAxcXXIrfUyghbKeX5XfOG5pzN8Q2cv71mQDjrvKKX0QuHy7oHVkg\n2Q2AW8i4XJJpc3px9ntau+nc5+5/6fZlonpL8qtDruOl2oAKOeolCtD1FrcG\nG16xh74h15zHeaYTrD8QG6Wd4tgR69RLt9CdIucENslrn2srssUGAhAhYvNV\nhQBd344JsiTmjixzhT99jUqCvZp5zyGqvv7l2iOhAZPWa7iJfN8braAkokuz\nfsmMzSztN96VYwgfychuquomdk8JOWFywFyrtzJk0Yl7De1F9a7+rZVcPC3G\nQtcD2Mc5gZPCiNZJq36l+z65mZF2VhEGgm7G1ybOA8pzr6i4AY6OAAwe0lSm\n4k5Q\r\n=IYau\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIACfmaoj6azmh11IE0ZG1AfZtF+/TnqwAdwyMVtnX2UYAiA4d8C20bdZPLI/Pa+keJsxb/v7fC0aWn59290ZC8o4RA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.907d4d7d.0_1596489778459_0.9560840558261878"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.18.0":{"name":"@material/mwc-tab-bar","version":"0.18.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.18.0","@material/mwc-tab":"^0.18.0","@material/mwc-tab-scroller":"^0.18.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"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-bar@0.18.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-9cSXBSll6OfMW/Tqm6edkHqKH3/fR50wRXY0EIz8S3jSjuf39O9Wv5fNLY3L9+wNnTc5hWYGHT4jNDkE0TIwvg==","shasum":"27f1f02edd5139cf5ec27d2df98feed2fc4b93da","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.18.0.tgz","fileCount":16,"unpackedSize":54135,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKICSCRA9TVsSAnZWagAAVUsP/jpdhRKLcUzJ697nsdKu\nz1bExKrYEGEaC0VlGffg+n4zQg0nBLQB9lh8iP5yZDZJkhVqQwUD44F6vpB8\nc6Y+DBsDe0OSnjquYLn87C9SaZYrjdslim5tkcLRwQxsGJknjKUT029YILIO\ngtnbbvga2pLBwMRxhMwO1P52h0AOIcd2JnyF5lPhw9yknmIteIXjHaGnJrDg\nDw2znTd7WNsTupjiEwMGpMWyfoMqQU5Pef+YgN63Tk4MRU2tCcQSNHvR36nH\n2oMHvv851t3FEOz0tzS3HPeMsepoPrqzQRGEjsGMEyEfvk9edzkTA5OUFJ7P\noqhrXsRdAlH6pvoCR5bfSxabiDsqs9WOOdEeSunlyjJeQTQ0NbuvUuUIQUND\ngdOccKtkGUqBbXiJOoqlWKhdWCdh2NfpaxCxSEur48x8T+lxwMtahZH/bv2z\nP0kuTwRYo/EdGr4cMfu4KMfRQuG2+SVasT9fnfHr2N6xxs1OWCXHjSgyWRa8\nL5HbFzAkxjc8s/5GxDs/6Kle6i2v+BAhe8fv2cTVuPwVEBlzFHCjovD9JdI4\n1uK5nYl8+pV7/AV56xq6fIcXAfB/SF+imHwFQH8HW++fp/BSCH8a2I1KQFWK\nHLadWXdA53ONLe16w810fZUyFkWqPKtm8VwfD6fS+yQqycVHLDp5AsQgzinU\nfa8N\r\n=GdTO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfcdjNJr7D5SZn4Zw8IkHE8tKGTFZHSd9kRNtNKRTdWgIhAPA9I5CcW4CDlkKx9x5dM9vvRQSE5wm8/NlHZhRIrKiu"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@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-bar_0.18.0_1596489874562_0.5666827977689559"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f7958e4a.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.f7958e4a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f7958e4a.0","@material/mwc-tab":"0.19.0-canary.f7958e4a.0","@material/mwc-tab-scroller":"0.19.0-canary.f7958e4a.0","@material/tab":"=8.0.0-canary.096a7a066.0","@material/tab-bar":"=8.0.0-canary.096a7a066.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"814d7f99f2c2016c7d56a7297cec2ee04c29bbcc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/814d7f99f2c2016c7d56a7297cec2ee04c29bbcc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.f7958e4a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-J2hVUaCePpnWT+IJZy66GOzS1EtxOdzurRH/yJMkruTPZ2gQQ1aWLly6U64FUb8utyS4//7gup5/Eqy+HN9frg==","shasum":"e4a5d67071041f06383af3e785e550825aed226f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.f7958e4a.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKMLaCRA9TVsSAnZWagAASeMP/2ePCCq4G2LplveUlDEO\nUTEIk3ySERZQF7Gop0M9v7JmGurXo2hl2BNKoGosIaG3GW0NtCuiJj4cRDFg\n6ToGq67QOWPLB6AwQ1+I0ORtt9Z5F3lQ7yLmn4BwelXrLZH2JFG2wrSW0apo\nIKTwu7ryaUeQEhs2S5o6IQp7enN8vqid0gF8fW8hrD1dDdlhpbUAJE7bPP3j\nB1o1YDSSHy2CpVaV0bm95N00lqNn/s16zRl5Ew2lYSm6Bm5mPGD7WTepxQB1\nm5VqbRSXx1CGbBp0zBY1arE6I/ePesWHGG/JzSAdbf/BOUlXeFVTYhF80Q3y\naqMq0iYxBai7vSlRW2H6eWa2sLj6jjSd+U10zlNLVHh8Fkbrdj3EIJuxzxs9\nqV3ytBmVgkGkkGyyKscWjer05eIy9A9iq76NZ4nhhXKu6fQSeqAKqkk3sAtl\nYOqEoTiWwfQzhb4blWxFqjBdVprG4dmx3IIfiE3GM41sVHujlw3qXIRRqxzL\n9BUPhLZ/V/LcJHx8SXC1MbMBBG65G9uKGd/k4qbUbWmCfJp/HlIZD4Lhpaz+\nfUwNizIhyTOk5DQIGOJ1hG5avuhX+tNcxKrDa+SLrBhuPLjcwBZ/o1tKWyRg\nEuWvDjM17MtismVKIB904TJ7348rm3cyGnI7msgP1zLjMCg2swpKXK+iCx+7\n8wgK\r\n=xyDD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICnh4CWXtxDMYIzURvW3u2cUOqqHnTpu7FqJ70da+zXaAiA2nDICsfyPp6VySaAahL8AtQ3ylkkN80em0iHVhuVdiQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.f7958e4a.0_1596506841875_0.13166642940313444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f8ceaf79.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.f8ceaf79.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f8ceaf79.0","@material/mwc-tab":"0.19.0-canary.f8ceaf79.0","@material/mwc-tab-scroller":"0.19.0-canary.f8ceaf79.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a1435334692098639ad087e00c61c1190812b959","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a1435334692098639ad087e00c61c1190812b959/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.f8ceaf79.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vNf/5jfAh/j2X/qRFZ38NGgeEAGLdR3v7/Lkt09wtVaF5IDP2ePAzXIkPEYFTz2m4brgNIUMeOga/CGz6pZc+g==","shasum":"de4ada541e62c2fb377295a0e8895fcf4921f074","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.f8ceaf79.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKbSNCRA9TVsSAnZWagAAbD0P/RkfYu++fSaP92+3nedp\n4QDOg30AkPN9z0ZMIV+8OW36U69K5PKhAIph3CkbXyvmJrDoZnApb5EBofo7\nAZ13bE7ldbv476hHqcKj2fzZie5/WXa06cCfjNVi1fbRBNJhHNGbZ6GmIKSx\n867zZvW6evTZOcQqssb2Sj+nvAxzSVoFQKcvWki9qsK8XBXXTqS1Bjg/6nOX\n07stNfu3kFl710s9QbYKV5DVyu4YHsYFlMWMVhQzuDd+RrC+lMvxXOQlbvHI\ni+8ZzdQSFcLE3yBWF7NYBBxW8rWbnQo7mZhjgQzbGbrCzLN24adnAowXkSvU\n36flTIUiRiTSRa17HTIPvb6x4GY7G2M4/OQGbdqcclkjBrh1TWOAVR7WBkuK\ndJkDGZ4NPVH1OM82RvLtcAhqJsGolPkNbE9LI+PnVFJOgQyFES0oV6cMC7mT\nvWlbpSixPaQetY5mrNlrZED/22+KpotymG2XaXS8JicVwsUCpT9h1BE7LLRE\nIdR4p6/izgXgCh4tZppZK5/F5U7cvb6HqRkeYE93FFSWH4mbvxO2ZULQBLAI\nhBbmBINfSevqGEYskqZ5riQ82+gCwg0+DUfJwaME+eXLtV8ihaaslvNZJnS0\nUcBrlktPMAAKnu4cRoV3bBMMZgwOFYO2LlJhY5rF3ckIR8i1JGP8xGPlIcCL\n5lnk\r\n=egT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5Zl3+49tSNb+MRqZC6JIxTRxFiyCsExc0B7T3/tWZjAIgRiXPc31N4lFfIQD3ZS0lPWn55aLRaJIXiBIj3BKocmA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.f8ceaf79.0_1596568716642_0.8362015661908058"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6b9e385a.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.6b9e385a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6b9e385a.0","@material/mwc-tab":"0.19.0-canary.6b9e385a.0","@material/mwc-tab-scroller":"0.19.0-canary.6b9e385a.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d264df08ac61122a6e48c33485335fe7444fbd09","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d264df08ac61122a6e48c33485335fe7444fbd09/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.6b9e385a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3sTh7xiyio3Uz95glXeDGZ5PhEBr02oGw5MiM/He3WWL2pF4b8YS+KG/u83o9610LIWCtCBzlKcKk1EbOvVtfg==","shasum":"9559b864d42922812db06c89164ab32989083698","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.6b9e385a.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKdNpCRA9TVsSAnZWagAA3HEP/1RAZTaEaqJoAStBvxyy\nxpnkj5PXQKC7ROv/zQeJ7tzPeKEq8iSUQWVYNm2R5sPhEn5EYmgPN7u6knO1\nDsoU+zzTSCWsxjYcu6tmZFgok4JhhM57sZ8/iZTeEq79Nehbyt9mWytTL9AD\nf1pz6kC6ZwmqMKZZd4IUkM5HLmzN9lkzADO2md65Uni5fz8hrmtVS0g/r1tI\nYaKIUtQU/f8AiwYHUfKG62HhPGN/DogJFEEbIURt8KrDZRfMB1wE/RQhuXzK\nRQNZWmRyWnaPhUSnzrRVPMghw9k1mVtz/jkK8/S13pENbidPzvOfRoIgpu7Z\nO+nMU06Qa4oVhnl2XcpHAHQ1aoWVV05lV3YYlPER3NGcH1tsQNXoPBaa7GsA\nh3aq53aQJMA4ZxtJtXNvuNUnNrdVAAxzL8eCNXW3twfc4nfW1hM1j9nU5xyE\nGCdy6gg55jCte/qoKPtAWvIcBmzV8kK6I/A7SNp5xkF1f2XV01ifjxjGa4ZO\nj9iH0v/2wdK0uEwMDSZfZnneGy8S4Q89/cvTKMPJuavfz6HlIKYw0rn10cpT\nntimmC9XPgngw+lZ2Mp8I2jAfwuGUUAt72LdyA1ho+et57uBzQ0F5jHJsLeo\n+BNwJ1bM7GQW6VFnfHCZt0Y8Ec0fn32ZDKly6jNppCol5bnFPgsgu7RTWxwo\nG2xw\r\n=PCz3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMHp5e/uGwi3/9FLzkd8d5vVGut9ART7PwqtcqojfIRwIhALSsJZlI40EFKb097ZMy29T7c9JwKvC+bq7dbA40XJD6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.6b9e385a.0_1596576617418_0.5521249735609537"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9a7e6d2a.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9a7e6d2a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9a7e6d2a.0","@material/mwc-tab":"0.19.0-canary.9a7e6d2a.0","@material/mwc-tab-scroller":"0.19.0-canary.9a7e6d2a.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"162d034ba4d899bea7e421640d7cab04f0130e9e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/162d034ba4d899bea7e421640d7cab04f0130e9e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.9a7e6d2a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WZZfW2ANX38xttUZMsvFc+w0MCi+a5MiNeWnSlz3hMcrvCvrz11oJ204UZiDZREOTAX0TokA6pG5UKw96UZ+Iw==","shasum":"687b00aa49c09c6d53b50496b38d398849d4693a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9a7e6d2a.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKiuUCRA9TVsSAnZWagAAOb0P/2g75Y98VY2LLSIvhNxU\nmq8SY7hIvUKh7z06R+uT8RskS6XYVFv5lyeR+v2MRRahYAIhkget6xzASoPI\nKa4AABJRg/LuxqtxTn2Ug2AE2BLASAtfkU3tTRgwgC28Mo8O4QpGvXMrHIUd\nUOa44xN45db6H4d5/HZCMTbzXaK42PtrjMjmDEtUhBUG/ut4krXmqVJEnGhA\nw7DGxDlfh1v8CvUTJMw5USUFyG34JBZnndgpS8g1wwLBybbbhnksSqjSp64h\nAqgRZ0mO7H+Q1DpKNI0pZ1j9dLhNd2LpZeseQBAsl9rOwSFnIyV0q5EA76pJ\n7oky8CBCvVob9auHPzIgd2as9AWheI1vZJbn6+En3k8f847RPJ/104h4kLyU\nbLwdh8NtdkwScfkbyY+GRYPNRThUoUjiJllRlR8u7Ttj0qk7bijB2m5AVGoj\n/FG0YyaWRGSxU2f2UykfEtClH8BxyQ8Ep7Bwq9Dtp1CWeTwRCmGlGZ1NbHFg\n4cECNKEEcIk+KkDN8VXOdLTNC1Nry/QTa0cB8lSvxIFaYR5hGd0xTjE/UEBo\ncfnAyTh+L0teT1Reqgo8fk50Kct+WK6BksihnSSR+5c6erf4L/AwEq++/H10\nWJXN9KqAfnvXKNgWPxNthP4slAH7LKTGJbaiCBujqBc+q4iF0qmgcGdZ4UNe\njnI2\r\n=upFc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHhOn504HGI7Yx7BXBRaJL1aLOVzH5G5vx6VXlNQwP1wIhAKXuuvvIr97vynIm9LF8Xktzrprn/Oh/xdqOyG7UDaBg"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.9a7e6d2a.0_1596599188371_0.06929377888171295"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.188f3f1c.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.188f3f1c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.188f3f1c.0","@material/mwc-tab":"0.19.0-canary.188f3f1c.0","@material/mwc-tab-scroller":"0.19.0-canary.188f3f1c.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"200ab3c3186265d2084631aa4f47600057a574eb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/200ab3c3186265d2084631aa4f47600057a574eb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.188f3f1c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CqYEo388PrKpp+Z/M9ljEyd15MQ/8Kdw8/onKtF9Gm4RZArIAZjVakvKjTVQsXwCN7dfdJ+/MpVyDjuPzn/G+A==","shasum":"d354e5e1949d8f5e687955510eadbe739424b54c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.188f3f1c.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKvbiCRA9TVsSAnZWagAA3iIP/3LjtDauXr0N4WfXgpmA\nGTE6U/j3xxE6RrmwQWsMnn60V5qixzxFIZ29KNu+gEHyd6au13TEvux+ncIB\nPOzNshW9i9LKyMRYshJmdo+B1X8e+BKTOvkAqszbJ/Kw7doWE7jyLebeR9gw\nHKpn3sS6JGmi+tXIWbAhEWBryJfvlgWo7GzJSO7KIwktEyOFl6GbXtdFvru4\n3wwjv8q9tOtF/UNz2pPrAsabePAAF1kbFUiLNvuBV0oWYPXq94Bgp69/96VV\nukktTPsb/OuIE57aWuEVkVh/zP/aUqGdcxZdMhnfG7nIxmZXoud59Wo0tSYo\n5aUiff2MM0RYnJHZn60FDNtflVKE3KPPJeZIoLfNSgrhDwr0D1KthzZznbWC\n8VF1jTWrvNVSY7HyPSlafSXxHP3dWN7KnwBezB+99iy8u9KGt1gWnYRXCHo8\nND6YT0SDwoe/AvfzloyA5/lCQqObgy8IZvYv58isd89Sk3IlayiL28Fk8fcm\nvFxlE0DUHBK33tuFkADkj4ohtgq7m4AFzVB4UzxHaZYE5Uzc9z3Hsd0+dK6n\nBE6ciqyPnvKr0lhaVBs6HFd/cyoOa3WbMb9q+DxaUjLKi55gOPTMk6QIku45\nBo3ucMZswcgAqOYaO8sqeYv2WscczisDJ2scBrph1VSoMwqxT95FauTCPSNd\nN3v3\r\n=tJYE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCStoSckWBHq52y/eqyGihpGvP5LzWiWgKSHoiBlEJapwIhANWQzZppgtfzFdV/yDFIT83Ww9dkeArkgzELFEaba8my"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.188f3f1c.0_1596651234323_0.7119280525774767"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b6106add.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.b6106add.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b6106add.0","@material/mwc-tab":"0.19.0-canary.b6106add.0","@material/mwc-tab-scroller":"0.19.0-canary.b6106add.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9726e6593d779066f5b7158af254537ee9c9174c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9726e6593d779066f5b7158af254537ee9c9174c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.b6106add.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-E+KNgVRp61hVG4l6i23AQQ7Ia5dV1TR3stdBIg8zDpb4HqO93fqbmRjE4kmPaFM20qH2qw7VZwrpyjeQglHDuA==","shasum":"ee7f8f80c532f06d47eca080a545e976a66d05f1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.b6106add.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKxt3CRA9TVsSAnZWagAAqY4P/iq1ee2AHRaHc7TZGnmk\nWiceXRjcDcYvOo+NypXxqAouwXU8hzmLPs0hNGiP3LnST5w6nzbPuQU1Phvm\nO0OITI/Z+zKSVfZNIxsI+1+6WL2O1a8SYizBjRF/F7Bn5RC7qXcd/fT7AYyA\nJklKRbwiJ5Jzu5LKgJ/pS2EwTVm88I97p3W9jy31b7yL7B1ny0VfCdYlcedy\nkTBFgBiZ9g9WKh+RnqP1pV0kNGc3oS8mmjRag7mUZ2CZS/qKv+IbptrZrSsE\nA5krXMOEQiXbHI9UacXCnkB4SgsWGbIl/A9Kn3W8yiWpqiUpCQxSkK3ZsMr5\nFXKAmMae8N8o2zLN/nxvOo1abwbpa/6d6IK1oP1nNfDtto+AESd/Io2e9ysO\nV5MiMe79wmBfdy8f3HnvUSKTXWmj2SFnW3hV1lgg5Y4b8HbHjtn3QfBLsy2Y\nRNoCvS5iumKB5WubkQ7pLsT+xVxOA3SY3V+7pXVpDb9rRmfG7FCoVCEfS627\nEfZPLd6SLpCveeb9IwukkJjmO5Cx4mO0oHRVilrIKU5UAG28uYAjpLok14Og\ny6rKCsnfnfvShNrmRHZqMbl40yDlR4fXvtYgwTKZd6OuUuqkpptXJDKCHc2t\nSAnjrTSpvSu3CD1rE1pS5U0XU4qWEObyMN/WEe/dI924F0IfqMICe9dK4M0s\n1fWt\r\n=aZpF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwPAEtS9znNwZcvseLv7Z2g7OcXkiiHMxrHtCHdV5SgwIgUMAYXvFTKyyvj7qzNfqYdnFb8K14SV26hCFvWl1GrMo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.b6106add.0_1596660598871_0.8553991883748706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ebb4c667.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.ebb4c667.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ebb4c667.0","@material/mwc-tab":"0.19.0-canary.ebb4c667.0","@material/mwc-tab-scroller":"0.19.0-canary.ebb4c667.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6911337bd0577b48c85e4d3502ed5111b12a7b4d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6911337bd0577b48c85e4d3502ed5111b12a7b4d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.ebb4c667.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IlDrQ/VpgmkSBHvkc5b06gLGul8oEAoZZVcqFfxmUL5WmxbeROXHwCUJzievHkvvpN0SIcYBdzSJDVGaJTyU0Q==","shasum":"f3c077510cd1f906ecb58dc143fa3c8a25df5798","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.ebb4c667.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfK0yGCRA9TVsSAnZWagAAcosQAJ8+1X++VmNY2pHcZPig\nHKyP37G14tL4al4FNa6bvuCUP46x7XdoWjhBxreJLYClO+nC0PMyXsf+jqHn\nSBFTzXZuVLaiBpu8gFu+0EuI35H+mx8zztyFzFZ3S61mWROrOevCSWNqIlFA\n2Z6mePya/a+aCvTy7+UG6hKOnCH+pwdZgFpvc4i9G8yuFbJ03maPA1kQlWNj\ntTyzaFMtl927MnUDY1Ns2GchTMBj1Um7rvin9uH7Ygllok1Ko2JEzRYJnSXe\nA5mES9E9YLs6ZjZgMwPv+tYzuL/eq//PcDVzAJD+Ay8aaKSrWmtNYYTTTVmI\nkLotfihW/kOHAswh4RmZSbF2JAsujLYWh4PBRKhg0GAWZ3WpLF/ZC9A0S8WQ\nMS5tJYSfQdsCulczmGXqm3X6uIt0FGuv8jfz8QzhB4mrkmiES076gWMKl2dz\nxEbCrVoaBwItdENnLUFrvR4A6DVLzF+Z7oJ5ujmDUr3T4Uik6fJh3i0aroZB\n0JJ0Zo7N/oTdgMO9Nc+5dj018rXISMMl4jzuEUdNH+g0dyTkFR48ElrTPLQU\nh3G7jDnMlNNSI5OtPcLEenlOsOxocn8O85ovJmUDNtOyArhHSEwVDQM6hUqp\no+whlFHkp7knfq9W7etFz1i1irqP25o1iYHozUEerqKU8sjZQwPMPWVov8Cy\n0ICO\r\n=dxab\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDYTWtVzRKMFHSsQgIChalL/kIJpwo6aLOKSLJnR1vE1AiEA+xl7fuOL9jYL1IaYBVzr3ySxXBzF98YLzmp81OPn9LI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.ebb4c667.0_1596673157811_0.4356949805772683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aa44289e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.aa44289e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aa44289e.0","@material/mwc-tab":"0.19.0-canary.aa44289e.0","@material/mwc-tab-scroller":"0.19.0-canary.aa44289e.0","@material/tab":"=8.0.0-canary.1b44b43c8.0","@material/tab-bar":"=8.0.0-canary.1b44b43c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d74632e3e1fce6fddaefd045c8f0b6f026b4e4c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.aa44289e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-tT4QZw5gOxAY4UW+h1Pd9JtByoHQ3/cckkCzVzD2G0M52lnlFh0FLnM3jW56zV38h8JozYKPJqU6UaBpk9tI9Q==","shasum":"e0b1d2c4db454c87e9d7c6829cc3f057b4e0950f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.aa44289e.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLEuoCRA9TVsSAnZWagAAnJgP/0PHHI5uZ5MXPZISwveq\nU1Y8iXu9RV5gmhU16ahZcFvjpjJqpDJ2DryfI7SDh++Z65R7sJgvFoWJPFQ7\n9cIC166cNo5lkQeciAa8H6djBW6XUReNMGRahbkDsggBy5ykh0sx6S0NKxkM\nL/YRt5B5l9pVlOK1YUtfNw8tl9JVDkp6ZicrX0HcCwhJ4Ac7rrJQ67c8DjiN\nEo14PU7wk4sFYir9dPtqj1kAVjVhitdzEI2/nBRytTvHuHGVB/ADqvFaG5DS\ni86+lsJxzJhT4AWFemk/H5kzBrNUWaZGjuIsrrjiIDd1WxsR/wzZ5i+jyk00\nVzHqCD8UUXwVbRfJ0ZV0Kfrq/P2+f2F+mr/X3CYzNS1hlz34kwwEwDLJKLwV\nVQlUJ7UKReiNclVlw2okJkmiUJOCNpfsvx4Z0v9tfLbKR0AZM8cmydwFxgKG\n5JMW7OWs8azsKnFaYXUyeSdHa+5/dw1IMvUhifCIyvH+u8518YREL0krG46e\nFMJc0X/na/Qlu6WMIUUtnCG/EtqRH/yrA1ajo6zDis2Fp5c3ThObZ95WsibB\nJwFEd0b0RQGg/LQq5e9leq6Fx3Q75y/ZRU29Xqiq0WFoItxEfzgFkxqQDfKn\nIs1vh6NrSkSBkjbRybA5FZPJQc/TCmfof4BiZe0gOLe898OFh0VGvZenWIH1\n2NC6\r\n=6muL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCG39gpuVa8p+zPk1ZzgYW2XdyRYolzUz1iTKZzmC2pNgIgXPt2eO3GH9W2szbxEBGHVZL0fkBH9voGRio6VZd0Y0E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.aa44289e.0_1596738472490_0.8055868561375632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6b0816b.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.e6b0816b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6b0816b.0","@material/mwc-tab":"0.19.0-canary.e6b0816b.0","@material/mwc-tab-scroller":"0.19.0-canary.e6b0816b.0","@material/tab":"=8.0.0-canary.96a640534.0","@material/tab-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b80bf3f3363af2f1b704d5fe2fe2852cd416b902","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b80bf3f3363af2f1b704d5fe2fe2852cd416b902/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.e6b0816b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-p85iGdP75kZ4D5BiGlOmquekog5yFOizhlx7u8ADy9vWTwKh0gr27UxipS8LaPKO6IqS4smlqAKp7gv/ydEfsg==","shasum":"f61c48e9c7f674358acdcfbe90e5add02f8dd5d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.e6b0816b.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLaEECRA9TVsSAnZWagAAuzUP/0udt0i5XFHoF6F8xsNP\n/8fJ81e6Q5Zx8nrXyWqnJ/EvssUgOC1OJ10fDoNSLkgu+AC4NuS6cF1Js8RD\n/+3CjmrCt7c2Jli9SYFekkR/5jtesLuuTNVWZNOMYUNgRgrX/xBfV4/9n8rx\n7rQhJ0OUwXQnYckV+mTO06kKDuYKxyiTS3YZQQtOF8BXxGHMPlmLF+fpha5V\n1/IbZzgJefEy7Pfh6cMptR9MJJ1oh6gEl1enG0QouJ6A2LTRUKa1MrO4R16Q\nPSNHrrNLDm9/B7sYqknlYqtLV18043ySDI7TdQIivG+bQQkoSyt1r2qzYLtd\nnK4Hy94964XrPIJR5gBcE/7gYCd+PFaChxyOjq1pcpYX4Ni9pN7V3tGv9PaR\nzsVD4pyVNRTWLH7W1FB5XIdsa3az9DPqaUs08cR+mNmeZKodTCWAOMvs0qP/\nhg6D/xvVIFawyJzYmKdndqE6R57enhoqE9YUaDz6yxLqpG3rh80aC19DuZj9\nQOHXUmXaKZ33qU2OYRNDgHQIN/QU6v5kv64MxmmdyEU07WmutUBU90Hr5bD5\nyqCEz9uYbeod/Sj8nMm/JJ27Oh9bPO3GcG/pa2G4a7Sl64s9iH4LtvZ/Atnv\ntqMPWj6peHThcx9MrxXfa8fXYLbd/0IdzMjeJzbQLPxkH+5AyLUkDFHSVpRW\ntuzJ\r\n=/2uD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE/JYj1d/QJrIW9+WzUO4Ou7/AC7g+wqPcbH3xaMKH/tAiBEB0KtzoSgdBbOmkfxaPD8L7s0qNmRQg7i0OdheEGgfA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.e6b0816b.0_1596825860423_0.5850133009437042"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96d15938.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.96d15938.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96d15938.0","@material/mwc-tab":"0.19.0-canary.96d15938.0","@material/mwc-tab-scroller":"0.19.0-canary.96d15938.0","@material/tab":"=8.0.0-canary.96a640534.0","@material/tab-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e91207d87648ea038ff3d435537ba7b2014ec19","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e91207d87648ea038ff3d435537ba7b2014ec19/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.96d15938.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-CBI+or1SbpdYixWuzLestnnBRbX1REsTxKCKraoZiEbg7Pz9cmhQ+FG5P166pFv5gAD9Lb7baWcYT2IHzfJYsA==","shasum":"20728abdf168d396d5f34bd898a699476062727b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.96d15938.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLbmoCRA9TVsSAnZWagAA2bMP/0NNPypEoRcOCeujanpm\nmPabsItuPzzmdE58nsbZTe/sNKXgBTa8aAxmxjFO8ToMoCzbBbYM1GQGJciJ\nhsD3fuVe1n0SSr8UF94cWb9K/2AbQlNcjivW+5nys5QZDo5aB1EJ2bxnFDuo\nQ8wjSVMJbvWv3PblUyHCdzdiWCh9M3pW/O3ByZgFnx0AH3HURfTSwX3FkWgz\ngckh4RzcVZRi7LKiH7T7iIk1gdCuRZA3Qadsuu3XoJvFLwYa11rOoziuMwYU\nkOSY0EwDj/cwNJvXSs2BQkxNdXtPkbrewayYT3uB/AIS/aYEuBcUvHAUfDQY\nR+YXzSxpV113yHpDXzRK4UYNfLqaAtwr5nziyKrl/K17IznWzYFIrwnbPJ+0\nm7eCLpJrm1E/ORSSFo5OYEGpzhFGU2SlYtGM864x8GLPCMWh0MEDnChUsRBT\nI1XTau/Qs8LBQFeP3PF4rxZdoCyLXXbeOqEzdJjms6lAXoQCsSWH8RHbHXdL\n1y68tLeEpsi+sJ8psgUEJkfMgPGSlMdNDaz7zrNzkDqa78kQILuiBUatqmOE\nPDB6O099STS4BmQDhGpyl7fcNNhYYQLkeyV1oV/VjA+xgQGc0HU1q9F39dAj\nSRiFHvG4CJ3qsKqRd3j8PhWajByxKmbW64RtVushsDAQIIyLyF82iw+a5s0X\nJUES\r\n=bTx0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCD+zYibKlR7bvljgNQ9P1piOUQrld50gT/WlXK3ATEmgIgdCIQsL5LjRslDXOaQgjhi961gk0/6nxjOZw/ugKgKRQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.96d15938.0_1596832168248_0.8041111624421196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9d991c8c.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9d991c8c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9d991c8c.0","@material/mwc-tab":"0.19.0-canary.9d991c8c.0","@material/mwc-tab-scroller":"0.19.0-canary.9d991c8c.0","@material/tab":"=8.0.0-canary.96a640534.0","@material/tab-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b96115b555701f0a2fb8299279aa9dfd1bf6b4b6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b96115b555701f0a2fb8299279aa9dfd1bf6b4b6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-border-radius: 20px 20px 0px 0px;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.9d991c8c.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ffWbtD9cHBGDv70iO+0CUcNa/XPW7s24jRkOifuBol0jyCpuuIcbw+iFDrmwI7i2LYMeJ/Q8Lx9XdfacI4EZaA==","shasum":"54f3a80d490e83d0b90b4577ab37fda08c76b000","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9d991c8c.0.tgz","fileCount":16,"unpackedSize":54204,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLdD7CRA9TVsSAnZWagAAXpsQAJPuWVp5g73keNVHbQBG\np23aXIb3tekCRkaL0+xgxnwkuDEJ2KtHgDCb0Uhulh/ph7Fb4I44f8aTsZhT\nElGY+5Vd6Hu67F+wohqouKqrVKUl5TD0F03tG/8FO2BB4Q2jEK8KHhpkgqMe\nViZiYETLXXMVCDO3/ePDBZkoE9uoxfL2wNBm6QF3dae9WoIiaEleCqz0Rpro\nqCJQ8l3vBkO3Zwgs5AjId7vUg2YO3CaTxylTPrXZtMXALOGLFPMquEEs9dUK\n74KUGNIqG3fZ1oYEm+ajptCpEFWQj6Ukshxp5vgYCBxXvUHJQfPK6EDcqx5/\nv9K6DEcDmPA3BaAtYU74vj8bCMkL+yj4q2Pq39az09ZtqulnhZgm+9Yw4wZ2\nD5ECnf8ApQSJD2CDMbMZiTet/2uGPlJop9Ef6BqQ1R9/hW+bGwPoJK6l0DFD\nhPjsdMnpIPMjThQyolAaoHL4WF4IJfOjN3LF7RNHP6Ay6XqC82V3VmVtZTa6\nBls6bHaaRvnyELB7/WOrkpUnKNBhP9u9EgXQJgZWweIJXeqwUIW/x9TDyOhV\nIdueZ0untd2E6RoBJwcF4HK3AC5FIP7bM8ROPW2t/uuTVuRML9hQ5sdG7/Lh\n/aLfDF8pq7b+Ybiw1Jy/PIHH+nOaSSsk2b83Qv9p6IPjnAv9sRef0ECAlh8O\nsIBS\r\n=XDSS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVDI+2gnNxSUy6egHl+TCJ4Ij34uEFP1AkNx/3Uo07bwIhAKDmpSg4DZ1fn87LNvVPYjWO6RW10F/IqaDpb6Vz0WlT"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.9d991c8c.0_1596838138812_0.940303717094604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.13bfbd72.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.13bfbd72.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.13bfbd72.0","@material/mwc-tab":"0.19.0-canary.13bfbd72.0","@material/mwc-tab-scroller":"0.19.0-canary.13bfbd72.0","@material/tab":"=8.0.0-canary.96a640534.0","@material/tab-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"801272b0ef15e1f90e0ba47c6a8d185052f8c48f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/801272b0ef15e1f90e0ba47c6a8d185052f8c48f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.13bfbd72.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-9lEGU2VxDLDZsp2ADqBC3+tR5zw4tpJr0IZrYVY/EmbtohiomrnxkdbmCYnrk2GSn7x663WolUcg8JIRIaT0tQ==","shasum":"71f0a146414ac1cd43c82a2763d5572bcf8d45dd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.13bfbd72.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMZ+5CRA9TVsSAnZWagAAVdgP+QCs+K6zgcQyqNDgrMLL\n1vpVdkyBxkKgoB51q68D6HILryWdf1bwfctQu6nAtigufgjWf/glO1BZ6Q1L\nbbbmdwvYOiAPm+52SUvi0w4MnPebxz0tRxB9y/MxFlHFh7co8OxXrKoqsgMy\nGERGaAkkFmx5eHMtP75A+ceGNCAW+VJE9JLv3iMjiwwEVyA/VmgoT4+DQNzJ\nOXNa4yFhKTEzENcNawukF+dlg0tl/GsX+brxCzennO+j5DXTN3uxKIO9HPMc\nGgR1iuVLs7Ur+EioVCEsRbgT37OSu3KtwnbCX8ws5qPogJP53MDAzlYRQVdq\nxRnpmead1H0mNxLOXn3OEyZvY4ALqkz1UftpdwM+roAvxTPv30f6pTR7qAnP\nhWsPMQe1yxO7G8zKlOIGua5rQa/iXEo4LYyz85nQ7cSBVMnFMks7D4oMwyF/\nLt/52P9gefgnPvG3OTBsAMis9prSeenT1O3fK0A168Zh2zBCu6kopuI0KZcu\n/LLMj1MAHbF7qEb6n28CZyKbaL25aRfvskB88AKuPlZ5aqtTj9mCBPm6IbNz\nsYjeDu/yudtLQZ30zRuYgAcdZkEWDqQTarRnpSzqr4ypiXltqhgFUep3Nl8h\nSdX7W2yKRITWbGgu7SqrdYyfN2ga7+sSjV8T+Jrj7RBMbjRFvjEGl+REGuf6\nIFfa\r\n=BOmr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEQAb6/pII2UFCqTdO788vFITgmzBU//gGkPpEzBfIVsAiA7QZwlt+56ZpBSay6oekNVgQUPD/jEfDf6wcXRV8G/1g=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.13bfbd72.0_1597087672553_0.19943342406974485"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b1b258.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.30b1b258.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b1b258.0","@material/mwc-tab":"0.19.0-canary.30b1b258.0","@material/mwc-tab-scroller":"0.19.0-canary.30b1b258.0","@material/tab":"=8.0.0-canary.96a640534.0","@material/tab-bar":"=8.0.0-canary.96a640534.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e34fbf2f01b3504b83592cfdb8b30914bad24498","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e34fbf2f01b3504b83592cfdb8b30914bad24498/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.30b1b258.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-41iorzHXWCdTeNEV65AxM9UrOY1ngc39/eHu/hQ/S8bUCojWLCeHPUAGzzU9kDbVvJ/a5gJbguWAvPai2gbbIg==","shasum":"fdcb5290dde942526ee0f2457580f70568eca2c8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.30b1b258.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMakACRA9TVsSAnZWagAA4dIP/RZjsfvIzAcy/hD/Aasv\nrSUimxnaYzcmKnYrK3tFMXYHt3HwMygkMHZa1PW/RH0iallVq0lRK/3HBOpB\nPVvRgxw2zqrtw6TH1cA/GMJK+iiS9QubwqfeBuV46y1Y4nyY0v+hmJEGpYOQ\nWcPKEG5lwIRg/APTACiw1w24StcANww4lt7YPApNG4PZEhgrMhA5v6A9X8dY\nOi8iunObR2vBzd/+U4iBJVeGqPJNY3s1pK2keahKG8oSPx7CQoPBSBo3UJoc\nhQG2AC1rw4K8KYzngpu2iUG1W3r2puFbWoJrmRE0blGr+E5yI/dXTgCPGpjA\ncNko0mSOmxRkWj4p7IwigXrk0XbGBFOuQ9eDQQgOQ5+cVYev3pruaTTRy/6b\n7SXZVrGRG1PwIgHFBiVWVhYu/IfJJRVilijNhHrOA2iOxZHQR1I0V5ZVbbv9\nXOLKP1ucFNOlbpak321sblFpJXa2bFb4Ri1cCW3tTL2gNWIE0LwG5nVmSuK5\nlS4jZtWAnzWz6lVbaZdN2t3SDVlb3Zq5ozEb4XvT4SzDsreFJjgaQOkRoaFp\nuIHEuE1TT9SI/YmW7qXdJiKkJ9/eBgx3ZULsbkrbZeB72MFezFMZH+jpHy+E\nE9pDPGKp2yihdIg1ajo7Tw/iiK9rEemrMATDrEQxRODxg0VDbHsY1RxIawh6\naqYD\r\n=bMHw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7pLDORyXRrceKqG6GyKbf5rSy8NDSmaPdQ8A5dqB+zgIgEhh77/pQ5m6TslpY+xLSbLCcRo5wIUWSMldjPBtQusQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.30b1b258.0_1597090048211_0.7610587389500065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1583e263.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.1583e263.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1583e263.0","@material/mwc-tab":"0.19.0-canary.1583e263.0","@material/mwc-tab-scroller":"0.19.0-canary.1583e263.0","@material/tab":"=8.0.0-canary.85a5272df.0","@material/tab-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e9ee447b02f2731c33f126f2c3d32bc3f2808125","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e9ee447b02f2731c33f126f2c3d32bc3f2808125/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.1583e263.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-//XLgcHOr7bIvIGF2sXQ8p1cI/vJePqHRUclBtckMamOnNwMkV4igiKqJUcrrLfBCYYARjrb68M+53Xz4hOvTw==","shasum":"1b73f694458910cf076ff6ee8f49051fccb8ccbe","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.1583e263.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMyWTCRA9TVsSAnZWagAA/FMP/AstZ4Js6BnqhyJ10Hzn\nFHDnJldqQWB+YVo5+J1AxgolAtLHXUFqMpL4vYUHHaNv609t/e+MnKx3reCA\nVLH2K3/RUrPwHiBbmA6dVGAnG2AOQKBlV+FTxHgKQbGfmUrFKwPjirRv3ZFw\nMcLZSyqrF+31vCJhAp18gEAOBWHsF+CeZIVoVxxvnfQD7jvH+xOBLWkJlmPZ\nWdAu66GL0GCYPEAfrQbZ/iU0fe05KuqF98c97vFk9fl16JLGdB9TTF0+G+tK\nLfZ2s9jngM+eoG/6LObpE2Bd/tTNUO0AROFrkmpxcxRRCFplHuK/0hxVOZF/\n8/K9xnFLpUEckBXDPc6uFBOOT1xLDMJA7zWdXfH0+wbEK1pqSNwFOAQ1eUa+\nQvx7KwkHHNCbJBDrs0sUQNkgjd1TQesBwx4AKCMrwXRVcaknXYKghiUWX0tT\n/wRDDBWLU+nFLyFxvMoLUKAPBmeGp91Kjp5/8UQuAnIIUc8OmwVLq4wiWTSM\nsMsZGfHI23W8yJ3eBCu5z2KbVDvdzWW98yI1xCZAsr9bDsmJH8f/N5Qn6wqN\nrPpmcvTSS+S0WmvEsbApd5P2nEa467Dv2a4r5pYnP9OTQrgumx/44vUo+0OV\n9BBcSxqaT2y1AskdKyEbeRIQiVBvrx165Ze+TKOLnYcjrKwaVM1srydTGyIQ\nh4d7\r\n=HvE7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDRsjlD+d7UN4I2JMb47LnW5QG9rSEV+EVkL/vWm64TwwIhAKs/Ut5y6iwVJety77oUwIy5LnoJfcsTIO/2ZwlROWIN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.1583e263.0_1597187475175_0.9500042126951114"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fefb1a93.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.fefb1a93.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fefb1a93.0","@material/mwc-tab":"0.19.0-canary.fefb1a93.0","@material/mwc-tab-scroller":"0.19.0-canary.fefb1a93.0","@material/tab":"=8.0.0-canary.85a5272df.0","@material/tab-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"328a8921a50cd0f162f89703f12a9e58406fd111","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/328a8921a50cd0f162f89703f12a9e58406fd111/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.fefb1a93.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3tfMI0sv0A4TTS8ShR0wmzJi8/DNKWgUGX7KxBDX+ZsIPChVZUbuHqTS+IfbYo9NCFg4gDrQcWl/zkgHBXB07w==","shasum":"fea70adb24833367c952435652a4605c812b1835","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.fefb1a93.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMzcCCRA9TVsSAnZWagAA/jkP/jjFa9v1CQ3hlzLgfE5f\nLbu1LmJE+nwGjro4RWShZbJk8SrQGgSDFJu47tsU+3jY+E8N9vu8hgBYwf8j\nZ63JMBla6wdp/SXzZYWyIevcL7e3nmaowNhdZQrEqMFJXb4Z/IBvcvzdGACO\nStxPhioTC6SgIlocXADYnryPgYMjyMDujrnu+Vx1Uc6cGwOGJ4jG4b/wZN5+\nIj3Hr8l1hdjma55ZnoJfrRiL6FKikKZDzw8ziXXC1aSGCiy0T3SFPASY6yNO\nUGT/dgaPMcouhZQTIca2kJFxuQegPmLfISrg8qP+qHWCQxVI3UUO8f1inbEe\nZWDl+TjN+8amwHGUJ0sneGR+sUtr1TUxebhVZbxpVa7JO4jmROhlwQBqB3zs\nMxGsrt8dlWSVG04gTk2gREhPpVpLE8NuhyEe9vNJ56GhirEnfOOwQvCzqL2O\nGNGuFcfzXOn8HUx7GHDdna+4n2DI5KY06W4wjpCwe+iBRvyHm7cdZoTx8t2W\nmPY9j1SgDo+SbqNodFhQorRMpP8ZxBWGVvnPjFClgjG6YStUaYhsEXeFiOUs\nn1Acpn4BuJ3I/NkR0p2Yz9N/FpZ4n9W3NR9OIlreNZdhx9Ni8B1EULTbnOpi\nUjEl85nUnbrvCn4liaYT1yIJl2MzCV+/OY2OYlCJh49VENhs9U8KUdyZuPB/\ni1SD\r\n=B53G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDle3u7iSfT5AQ7fG0hYdD9Hq8ZpLvVluAfBM/QKqNrpwIhAJSNCydfg18EChQPbR6pJ47PmmpwXysyOqdePJzaoxw2"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.fefb1a93.0_1597191937702_0.7294760218135299"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1ac5b9d4.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.1ac5b9d4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1ac5b9d4.0","@material/mwc-tab":"0.19.0-canary.1ac5b9d4.0","@material/mwc-tab-scroller":"0.19.0-canary.1ac5b9d4.0","@material/tab":"=8.0.0-canary.85a5272df.0","@material/tab-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"33bc5db0b752b7e0d3710150fbb0449121619692","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33bc5db0b752b7e0d3710150fbb0449121619692/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.1ac5b9d4.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-sBNKigicHB+fMBqB9ijxuorCJPvwxDG+nug67J7gX8Z0WvNhj1S8KCGv/0GJNhMEQ3vP5wiAaqSy7km+Siejtg==","shasum":"5f78da0c263bcf6764b1e37874599555c27b2583","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.1ac5b9d4.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNDSrCRA9TVsSAnZWagAALR0P/3M5P3b6sh1NnZafzDzs\n8+G0JiFB3c0lguMjd94UjLiio6/YU2ThFkBRWv+dnn9EHFT+iAilI9Wmpxl6\nIwfqXCNMD1jkb7L6YTs3WDAaABBTWpLopdn/G3dk59MsJwEOriVrJ3na1xwG\nRZpeoCInKneWHKc/3T4G6mMy8PdyLCNTCX/vw+H1UYc11xNvpdRBDpZLCoqG\nzdrYBvm5xVKlBn9vTpy12osS9uyLLqBFfIL0Jhv4nkFd57yaiCDRbBgIOf8g\nb3+ysum/yR+q7FatCmbgC6gHAdbHi4r/bRMRCNMj4/LyCGgGDDVZH4AO3CRl\n2WYnZANk/JLp07u8x1H9+L1qKM6zPaKvfz9V5/HmsIajr3XmEzKHpafirsZs\nl1lgJm3Y932Zx4e6NncGZHAlrdxhHX2Q1ZY3wz2zkYVf5yGjItr0bBqexbGa\nwMvYQDmTKzG44aY9AYeYPoZYpb9Dia1GFuds4W5wEeHA+KCRCRUB0xkZwaXo\nDLKNyLMk3mM0JLBod1Zd8VvZk9y4qth85ROqW8x4t06SyWmfzfB8472LvcQS\nAiJvSVQOA8UzFDsDn4JRbCWMWEFbnSeYgkUihKHYC0fiJdtuD58CRl83gCkq\nbJXWO4C4mMo66VwJUYFxdDLoE1JbJy+BJ+nGi8osjJcWIx3TOmpWq3MFA2kw\n3+HH\r\n=FLLA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH6jcXWYEE34yg97q2jtkJOoPvTUBRSw7/fKaPRm9EcZAiEAq3lJeu+UqsyGHfXkhh3B4UwNeGlXte7ol9PkVcSSxaI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.1ac5b9d4.0_1597256874834_0.6592138111364594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f17f5052.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.f17f5052.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f17f5052.0","@material/mwc-tab":"0.19.0-canary.f17f5052.0","@material/mwc-tab-scroller":"0.19.0-canary.f17f5052.0","@material/tab":"=8.0.0-canary.85a5272df.0","@material/tab-bar":"=8.0.0-canary.85a5272df.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"837a87ef49533f905c92ab0aa9faee12e51ea3da","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/837a87ef49533f905c92ab0aa9faee12e51ea3da/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.f17f5052.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/WDh8GeoAE+tvDLvyps4MO67dux8ZQcuZPERbNg/M6wvAPUzFHNsWYa63uLnmiSd7mZttsfW626z4a287XN3wg==","shasum":"7b0a76e22a2e3bd706d5ef23adaf779830465ab0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.f17f5052.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNXUYCRA9TVsSAnZWagAATxMP+wenNNfUbrFCEl2dPpJA\nhEa31Se9BwsVcK7WldDCgR4qwdOV7fkvn+KPpcLYTgHFoYAePweH33YcM74r\n+a6upirKfqm3vCknnQO2QwzwpQyaQUcaHRjPEEmxT4cyGz1y7+f8V459k6P2\nMEc/YQbjXcrU/yMSWYOMbNU8igbHVfbk5gwoaYjReAR2pWTTwjLzne9Yi+nf\nO5EW9bFPDeN2ShrOzhTgEWx1KLegSgO0F8B6qcFCQEpK/cXBd/yLhg9aR5WQ\nLsoo7ah0Xu7vY/Ax+tHG7QHbilyC0QnUvxkJAGuWotDce9CLvXWm8BueKZ+6\nubcSoQe0eBr4PwIDcvCUye7lzJ7HerC/nhz6MTD8yCeaIs3NE6Ki3RsJbwJD\nKKHlWH2t8Kp9NO7PCHLqBqIwPvQcPzGNnTAIOeDOwsPBphrg7/Cx8Nopr8sm\n7gTVyHJcB/ZG00MSeJxlbbfDnz2oBpxH6OWr34teovM3A9m8ruQq9ng3DrZK\nUiAcN+B/mPK+Otg4VPW2RZih9YVILoHdJoRHmlpo4k1K61NYsV2l9YB/Gq8C\nh7qlduwZzsKYZ1y2kWkwoUCvcHdIAZwKpB9yKcsNMEzdlzhjbm+j6aaDpqeq\nVDpjgygv2RDsRxJ8f5YiX5i2t0b5oA0uuJep8j1FCQe8e1UV2/sFi78TsxKx\nciH8\r\n=0zb2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXDgBi6gCvj99JRMAtowe9cuGSL9IOGuyGid1226GrjAIhANU5LfS4PcZGifE0sKqpg/q8GZGoLDw+HyIWajtBHP5i"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.f17f5052.0_1597338903653_0.29065156797316605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.80b5d20d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.80b5d20d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.80b5d20d.0","@material/mwc-tab":"0.19.0-canary.80b5d20d.0","@material/mwc-tab-scroller":"0.19.0-canary.80b5d20d.0","@material/tab":"=8.0.0-canary.a1dcfe97c.0","@material/tab-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2183b66216f3cc82a57427b3aa805795f18e0925","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2183b66216f3cc82a57427b3aa805795f18e0925/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.80b5d20d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pF1j0hg1bUqOiaQLe7tbMj+gq6i7YoQ0Q4vEHWQnjjky/5Z8wLKbwSsc6u0jMccFlFWTvsA1BobEGuF3B67pPg==","shasum":"bc9e4af97741e72729b93d59ef4bf6615d80305b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.80b5d20d.0.tgz","fileCount":16,"unpackedSize":54156,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNYPLCRA9TVsSAnZWagAAmswP+wVPdoUhdZha9cB34FLw\ng9tuhZ4NGcYNXJV+5SfmzDYWX8eOnyQu5DOp3plxlig/gdbvRqnh82wF41Ba\nvAMEraF4WyoLZcaU+HGs+Xbrz6YIrR8gQkDkzschGjzHASu5h864AUwxGhoU\npagZiyrvu0fTd14V9+91qOFjfbMfEHh9SnBfBNAd7w9uSAQA0bo3fEMSAwxJ\n6MB9s++AN5Y2W+uCuyF7rX+UJejJQi/nUQ53AqcddtVM3tJaE8uYL3rJv157\nwG/VkHbPe5WDolX3oBGPHAditcDq5jjcR/9xb+uuh90kcS21/VDbhKpWzB0t\nlK/0i2ESQ5KnLhzA91Wk9b2sO8A8K3Gu4OlSOJRQPho188VBWDdMWY3s3Z/R\n2pBJnduOe9t6M4gu0BEc6LhQR6Jw/8iNR6sVP5dnPd9XheV4xbihYX2JkzC5\nSr2De5696NAbwOLGI0FTjdJ3cnxlQUKXsQtSbc0dGakodi4GaQmhLokcOO9s\nWrzLOxktdKwmcnCv5CVNINUeelztO3gTlzfh/aqXhBMM+CEZw5s+0Y3RWc7J\nVkiyvGKI06ZK08L+yCXKlsmoTeYuZjyHHcg6RH5xsdMnxNtAu2VfsrfsnAGN\nbmMqCEoXOXiJTn8AiBNAJx9bh72fNACwCMP/awzUUH7MaWi7q5bdbpU3DKRg\nNIfi\r\n=ocDt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCv2soO+jIbGu3P8+B4Ofhw1ud6eKPQ2P9wt8YoTeLb4QIhAKJi5LCaYlONiMaWQ223DnjOZJl4sleEX+ta9m9Yn+VP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.80b5d20d.0_1597342667161_0.9804957835091292"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.758635ed.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.758635ed.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.758635ed.0","@material/mwc-tab":"0.19.0-canary.758635ed.0","@material/mwc-tab-scroller":"0.19.0-canary.758635ed.0","@material/tab":"=8.0.0-canary.a1dcfe97c.0","@material/tab-bar":"=8.0.0-canary.a1dcfe97c.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dca431ba367368af1f858369557a0bc5db6783e2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dca431ba367368af1f858369557a0bc5db6783e2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.758635ed.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Cf4khG/I5jQF/omg7ohKz2vTdv4+NFTiAZH36d9MiZv8rrQKYJsI3mrnl2HVhSjdofa4Z5bvPYi/3gRKIqaltA==","shasum":"b969c707fcc031c63586bf6cc30cacd0a049eecf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.758635ed.0.tgz","fileCount":16,"unpackedSize":54123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNsccCRA9TVsSAnZWagAAeKYP/3IF3DLm9slz0TYkBC90\nK/icMRJYM0X4WTKal+dSAX44zekEBMnYZo2zP1kEe3aVRUgo0sF7n2PUity2\nge+rTW8+3rZ8vPP42JIwgtv7B29P4F5tzU8TZt7Prdtk2o5k+VOgHTPIU38T\niSB0cO8DH3/0P1YrB70lUK3eQ0HkKihdaEF8Qz8/GAtKHggO4mHapmUQMY8q\nDHPONwG8+ulXRzj/nnIgMu49AoCLhWLTa+hL4d3CkBZzsrmmQK58GNxxJy4z\nLo62DpFdeiLVafYp+5SU9UdwkwtuQ/DgfBrj8tLGwlDeti6Mfjl2xY9ImWDl\n3qIWo7uP3k7vxOPZlYkYi+kIGNsuwutQXzscmP7SyqdTmFXWtAVD5LNOah+b\nUih9qMmxg3Wzu9C2cdHZswqH++oMBV0DvcvGsv65p3topwmyp88CGv+kkqCo\nlmJjZd4f5cAe8U11rwaaWIL6tze7RGLvn7cepDt7gwoMmF4mhdnDbDz2L1Sp\nJPGY5wGFnVc3kX9GtJBZEOSEKqA1k+/y/QqwBHDNn5XYzgJKVG1kiqLyUIjR\nyFkAKQenK1YJ6lzjoWSJID1OomPYgBLrH+dp+9Wvo9ESKH84SRPUtzxfwtRD\n9O5rJIutTpcfNJMnKvCFUf1NHUENdo6I3tOendsAruZTsNwAwFXyS3r+URst\nIsDO\r\n=Myg0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCnhdIsoV6FMsuJplJMN/8M9KMc5Gwh0tYMcpKvQFZ0zQIhAKVPLA/8AOIBwpziO2KHCp5W9xumAbU/XxQVjgbI8Kax"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.758635ed.0_1597425436284_0.2667407791285539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.18d6b808.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.18d6b808.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.18d6b808.0","@material/mwc-tab":"0.19.0-canary.18d6b808.0","@material/mwc-tab-scroller":"0.19.0-canary.18d6b808.0","@material/tab":"=8.0.0-canary.150f427a0.0","@material/tab-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7eb789f1eb17355bf97652cfec031e407c9e2fc4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7eb789f1eb17355bf97652cfec031e407c9e2fc4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.18d6b808.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-x9Sc1Rvtwh0vYNWH+KGcZ+BUQf8JJpUjDmwYVAyrIuf2/j86yMLzKGQvByupFn1SN3UfNZwQVilHuqUzn9KA1Q==","shasum":"afef67762cc018b0eaa875e167c5a346dd001169","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.18d6b808.0.tgz","fileCount":16,"unpackedSize":54123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxlwCRA9TVsSAnZWagAAtkYQAKFy5k1ImD8E5NXewpsQ\nRweM02wCagJBn8m4kfwlY0BU0bRICnTDdjwe1XrdDxKJKgcX+U5KW0dljk8w\nCptCp4b/gRGTQlQJmL7Qp2GU1INCtzOLtqiMJgTHHddIEgdi07/dhr1vFhYk\nD1BsHcQ/pHjEHjIaDoPCpYvCeMlXJwTPKoyYVLro/oZOSNglGETFYmBZ7Bcn\nWH4vchsDDDeVCBKJrjenrTXtufuVlZy6tLa+F1JRcDM0eB4PJWWhaSKhhCtO\nwf5j/Bkw9WcUTFJIWJytzQdjFbcFruOX1/VaEA80o9JCvalrAcuMRb9VAIKs\ns7uVYdxSIcH83TeTXyLVlvpQjTWromN0m8mPk3TT9gKGcwruAwdjFBuNt+66\ndkB46QJsDpjHDtkOIlqrt4zh1kDZn05B2WsbDzAnEqSasjii+k1+D60ncy8E\nF21hZQD/RzBCiCgcgnVra9ZxSym1P1Zc5capxqA0+LuDj4e0fiLdOM8xOame\ngjzpn8FNN5ltZJGAIVvvqv2Uh4gmruq+9lS3QspbFzbYAEasNoVcKZMRM8Sg\nGKtH3WLm6SNVfhZbJ8rmlFlfDEjLSXdOCugz+14h8z8GGP2/PNcJWFkf47bi\n/sCXzdcp5DTVwFDtOfGSj9hQFJAdPY65bPqH/sSiyL8AuMG/rdwEFoJgheIe\nkE3m\r\n=WUpr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsktkwXRQ7gyqx02lOmEGdgOAQyNh+EuXEjgSRnuSKPwIhAMBOe0thZasZNfglo9K+b1gT90rOavbJT05gEYqtXi3x"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.18d6b808.0_1597446512138_0.8617327432812023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5f8ffbd1.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.5f8ffbd1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5f8ffbd1.0","@material/mwc-tab":"0.19.0-canary.5f8ffbd1.0","@material/mwc-tab-scroller":"0.19.0-canary.5f8ffbd1.0","@material/tab":"=8.0.0-canary.150f427a0.0","@material/tab-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c230db638d0171f7a47ff1f312ecc123b9bea4e3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c230db638d0171f7a47ff1f312ecc123b9bea4e3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.5f8ffbd1.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-WyMqhUh/Lf3raz2ejzBboFZ0IynaIuC+uhQoryVLRi6CbWAV2XYoDDa241VfClV07KYcLWey+zWgycVHBUf9rw==","shasum":"c6a9154c3328a131c94f188e67198fdaa2ebc199","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.5f8ffbd1.0.tgz","fileCount":16,"unpackedSize":54123,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOwGpCRA9TVsSAnZWagAA27sP/0uWDx4YAvwXnzQkfSHc\n6WZyhONLQYrxFWaBZ0rntsdB5s2GvBgrDXZAx1/chpuGWSCYuHKv96Fmxduk\nUIAJDl5B0eqU4xnUOiVPAo5mrRXAuolzU3IeSGQR7MHQZEXVTgoAA8G/0qwa\n9glKsjHqC5qUI8ozmUkOoITNpitjjtmrRgdPzAq6pxuVHmfBdyGsKgseZRUq\nyKKVNyxcPm+3mxEDWEevPSh29kFFFY1k241HDtRngCKex6VdRbELrZuhIvsW\noWpYXLskVYeMW3PLCpd/QmFAHBotxfB8YEEcKpnvaTFOBYbVwH8qyOghUvso\nxfUtAuqgoVQoI9KWxx1oH6SQILbSqm2LnrJbH8Q3DoLJjmySkZIYFSyXfxrK\nKtMqzsdavBre+S8CTIhkOSrXugEiDQjDEXvLJaDklR3YvLMbB6e6fEAWGfKj\nv2fdQM5c/ZGWwG2/aPjctE1kbBQ25tRS10ZzduT44ZSrnwyK6GWamm5TrlFU\nb0gMamAI2o9eHk5UYz38KkyBRl7TS4cztazF/5bGHHWyzZVRoIn3plRDqmkc\nF6rsuC2U9TCHCSghFgyskDFQxQfMRu2jDkWacmvTBu5jVDi60c2+43oVlptN\nqql+xZXtCDY2l9HF+lDuSsG7T64O4SU9axUcBOvuZAfqKIV9q+546eyuovI3\ngmO7\r\n=MHhV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE8tgD/Dz1nyHFCMLnH9NGk7TSGeNNuTn8iXKZPGDo0UAiEAtzDai8Mo0K4FXfSsFvVHFSBti9F3lJzPbnlac8ack+0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.5f8ffbd1.0_1597702569471_0.5052489984181665"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.8604d59e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.8604d59e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.8604d59e.0","@material/mwc-tab":"0.19.0-canary.8604d59e.0","@material/mwc-tab-scroller":"0.19.0-canary.8604d59e.0","@material/tab":"=8.0.0-canary.150f427a0.0","@material/tab-bar":"=8.0.0-canary.150f427a0.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b87d240089846147032623e302121a478088f7e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b87d240089846147032623e302121a478088f7e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.8604d59e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yriM/X5R0jeEx9bExWtnrkyrXW2KbCIu9BaUDr+a0eV6P7nFDfNuQUyrbqfRKLiOpkQc/Wpq1JeH3AgZ/Ub6SQ==","shasum":"9cac4f5ad676478e64c4c36a655b2a9dbd27f66d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.8604d59e.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOyjRCRA9TVsSAnZWagAAvq0P+wbWlG8XrzOJYn40s3VY\naRpsG7Y1/xUUY/OZJL0L7Dt0yNdaqbJJaHbqEKeogctZOphLr5AJZqNWuMzC\ngzMRCl59ps0z15w4ftMw7zMk8LGk7MjIDMydjkWT9NtxwL/CpClNiZLIR5ut\nStPJqywnVtj28nGjngrT2upyyZQdCdtSPO2thL1hK0IcPtT4nQmn/Bova7UO\nia557eOfjvMsiwhT1DbXydqSWZuMZuoxaq1Iba+TGkN5sdCYxJYqwqI4fp4V\nYexC5K166TzphnvNZyRp/WAeny2Z7RLOtuoh4wXKOv+L6D5L4iO8403D/y8u\nb5/Fp5J0SG5KAkffhzKZBY2Q2B9FVVQa5B/0NSdGNJP0dDW+hI59GD5n0tfW\ng8d+Vahiiup+Sl8dPR2IDeuoNOZgdEDiabMO15hnOEzctGa432pIwzPEKzQQ\nOixSVsh3NfAENAstz2TDv4rNDWjJ8HrfUw2AsiMJLnLAUzIRXgKTYXSRsHJb\nojyeVEOEs8HK4z/FGGUMzmtTY1LQhfA0ORhtrViUqwkHpT/q8cWeiZf0JbWT\n3aAWxxSa/GepODCR2WdqJX5tvtQnxokvV79paF+1BBoC0B9H65llG8pZDxvC\np2aUxQX3pF5JyvyvzqvFxtBK6FiCuf+p/zG2BzbfKSo2LUiHLMadKQtWxfYH\nBBcI\r\n=HuzF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8CdOxnLAewQXVgdZ84TpL0pmMoNXfdx5pTFD4Kue4pAiEAyCbr2IfnCeTmatb83K5Osri0+V83pt1vUdsXn4m/BO0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.8604d59e.0_1597712592549_0.8224565516033051"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.1d7d5e34.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.1d7d5e34.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.1d7d5e34.0","@material/mwc-tab":"0.19.0-canary.1d7d5e34.0","@material/mwc-tab-scroller":"0.19.0-canary.1d7d5e34.0","@material/tab":"=8.0.0-canary.defa599a8.0","@material/tab-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e5b1904570278e726a75457dd1d8c9a30c98669d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5b1904570278e726a75457dd1d8c9a30c98669d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.1d7d5e34.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-QywefUx89H/kGceN9GaX69KHcD8SSLkgSHEQ0gHQjt35uMJlnBWvXFFGRMvjI7zK51XWtkwDtxPPETsXMs5WsA==","shasum":"baa943fa9c9819083886a95e780d80366826efa6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.1d7d5e34.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOypMCRA9TVsSAnZWagAApD8P/2YmU6sbS25ee3fhyc50\nBN95azCBCAfq9VJKqp0CqqTa0j5qLk+RyANQPJk1WBBo6QIe1EexNci/Wg4t\nlIedk2pn+Wnwk1WdoTCb0Zo09IRipG3fpwfiG4E6skKP872TXVV5MtxSf6dH\nhcJuXAcIZboGWn5MVE0ic27KP9hzIorYnb0Ihqpo9Waerux8UY6iILSiWiBm\n+vb1kLr+4spKJN706LxaMVxIOJuLw17bdtANAJTXFomwl2KqPRmsYehyoZZw\nUE0HYCxf+ZunRfbSL6xGmyL41jLW2D3hkMUEwuY0oCGEE6Tx/C0e0fZSq/Q8\n3gNSsJH46x6dnY1VN3oJ7O1Efoc1MZe/OaEcknOSzrjw+3cp8XiPy7exP2ZH\n54c0i7WZMGLUSRUBaqsPiXJZaLaGO+TJq5ImX40ilX6FBpr7O3EW8mC39EPU\nPnSU0CGmfKus8rdokMB9/sLpHuIoGCTeIUu+KplTj75ez378dLpFXGk1gVHg\nfDO4UP4o4/POHbtqZeMmwDIxGfoCmLpmkct5hTkljsbtS1BRGAYgl3welDI0\nVC2rF22QLoExAo1lMjrasYX4skSzQVjUoHP4G+NBOAfhOFzcmqpZHOLz9c3V\n8uF7I+zcuHhvtPVDjga60W8l2C0qE5YXyXkcGpZ7a3BwTnxz9HLca+M5klIk\ngnOu\r\n=hnPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCaH/MV7LVp0DFun9c+SsQEqXU0ubyvtncM9emJizDEdAIhAKIW4YGsl+NqeR6ORfTmok3xAViQGAIw4FzHJBa2ECP3"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.1d7d5e34.0_1597712971810_0.9640559616824222"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9cc95c07.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9cc95c07.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9cc95c07.0","@material/mwc-tab":"0.19.0-canary.9cc95c07.0","@material/mwc-tab-scroller":"0.19.0-canary.9cc95c07.0","@material/tab":"=8.0.0-canary.defa599a8.0","@material/tab-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"48f9adf6b09d7b2532669f3bb466d2dbc3970990","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/48f9adf6b09d7b2532669f3bb466d2dbc3970990/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.9cc95c07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-8nA2k4mfP/z790RMq9IfjGHL5tvaGpQOy2S8ARP0YNNkWkyj2r+XLPGc4QE5f717pmwsR+HWmo0R3mFHkhQmMA==","shasum":"44829e19b166482c8a3693ae794997b83d2f4de8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9cc95c07.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOywUCRA9TVsSAnZWagAAVZ4P+wddxzPOqbReuAE6f0Sv\nJ1pqH2UIL623jBdf5KJoLgVOvNy7Vz9mVEEsbetCP5WgqMBy6h/nOevJo9ec\n5vvt6N2ku2fNojNEbIkVyvIc073LhUxFY2wuEytChrQKE2ZJlmD8J+n9n2Df\nS7Tl9hO41MOUVVK1ZzbPqvDXKVj8wwzCz6w9r3uRc0FkVKYu8zTwjqgHjJL2\nXLPUiKJebugEd6K7emaxZEAtGipwia75MZ0+5478CjsZ/Vz2ALbqR+Jcfnb8\nm0HMdHHHAih4JgCWvL6tynQK346Av0saKReXY+yXWIMXtI50vFYRczmVvDIl\nMDrGuWZR8JRQjU8VF0TTMYcUzNATRkiYAKJYakYvbvH3LlQIOz6ihjylo4g9\nywtmn4dZkn77umOmilQXjAYO8Jir045ugZq/v/3pN0uCVLsqLkiMnbqgPigt\nE8OIfwMyAPvSzZdIf23kLDWKZKW6UGX2VXRZFTPipHk320CS+5yKZMNOPAxT\nb9mKfxn5o6ujZ+s1BRUGn3z6+Yv4sEGR1fOi2U0J0I7vU+7HekOZ90IjgmJs\nVBvcZw62JlGhAE9cOw/wDeRVQEhPC/r4q4/eMQGc7Qy6oZN/+YuEiNIfa1rd\nfTsz/stQ2jTFaPTxEw6hQlDjYhMy0BbeDVyFFvSz3OXERiGsCiN/ZB/Th3Rc\nau5L\r\n=Xzkn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHa8VQemWoooPKfGym0bj83sNpcezcswL+7Zd3kBBj3/AiEAz3CVTXxshpFV3U3YdSrntggOHttF2dlxC/e1H/iVnzs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.9cc95c07.0_1597713428457_0.24634189002613804"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9f65ced3.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9f65ced3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9f65ced3.0","@material/mwc-tab":"0.19.0-canary.9f65ced3.0","@material/mwc-tab-scroller":"0.19.0-canary.9f65ced3.0","@material/tab":"=8.0.0-canary.defa599a8.0","@material/tab-bar":"=8.0.0-canary.defa599a8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5aed2922c67f2ad7133772e74310e121b406dec1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5aed2922c67f2ad7133772e74310e121b406dec1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.9f65ced3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MiAk1SF5Jp+JGEAnx/yk1wuB2ga4eU1RfHuCC51gugTH0Sl6jkrO7YBkWNWHxlWyFH53eMwno84o/cnyrUa8Cw==","shasum":"6453bb6ed890d7c7b1725146e38017f71e9a11ab","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9f65ced3.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPDcvCRA9TVsSAnZWagAAcoUP/RGArazMfYWjyIylhQfD\nvhWl9vknOpjh5s9GeMCxNtOQ75QVRveHI3xrfzoi2F139AEQ5aunniz+8GYX\namDD2ZQWBSmtxImN9g5e3V/1gZHPp6jEAsewWrBlsfN4dF0MN2XL3NG/i5Fc\ngBOIdYlizW8E04LmobWdg/eu9NK8ydQi5SjYqV/cpDll29DfNYT/8+hwlh/2\n1uzk6zTFsXYRwwDGCbWMKwGzwZnBvgCsUMQJs/+xDpOC2kmtYK6yaW1Ly1Ma\nQdl4gdh1/Ha7l0XmWCj60yqPuvX+otIPoN0XZ1va46ErlKOLDFRBG848YrWt\n1C9MI3MIWnPsa3FjeY0flemV4PpGBWy+DCagMR3tmgDQxzhWQ/CYvwSKNyMR\n/Cp97YATucRuBOAaCry6WVNllBnS7dkjGyghN8L29dnOuZ4Mc8ko+v74Gtts\n4GWvSjnvqC8nquWgE6EOVRlGiOF6iKxsBUrGJbkxxLHJb/KTlYZXtaqJilID\nXGAgZJND9TSutTKdZrbPTsPjOZhQqOZMkcTFwOQ2BYzaKJ/tWmA1iNhaHcsZ\nuTRHpK0ItqhuJoVKVj+13nAYWiYwI82i9Pg8weYO/CS1ElH4S0vc0waHtwwx\nmNMoZo5KBJw7Eo4u7jheC3/CwQKfb+5V5sAVvgvhn4xPDThPRdJluhsgaaSc\nf8/b\r\n=521d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZCRK4wDaO5/gKZ2UwY6zM61GvQJVYyPIUJqF1OKnpoAiEA+/Nt28z0i99t7CKfUG4y8VYWt0S9U5zKELqL4iWUnVI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.9f65ced3.0_1597781806673_0.5298560586341301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5962b365.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.5962b365.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5962b365.0","@material/mwc-tab":"0.19.0-canary.5962b365.0","@material/mwc-tab-scroller":"0.19.0-canary.5962b365.0","@material/tab":"=8.0.0-canary.66b8ed7e6.0","@material/tab-bar":"=8.0.0-canary.66b8ed7e6.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"454d30885df0a3162dac8184409307ee571c6215","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/454d30885df0a3162dac8184409307ee571c6215/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.5962b365.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-g5UeQHebPShW05+AvKruS2aWO1ci346j+YWPP5poxTvr4g3DEpKk9GzabWXIQOHCODPr4zemIxOLMXEnGTbddQ==","shasum":"ef21d026c3e7241a201ff9b28da5c67bfa405e58","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.5962b365.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPYuwCRA9TVsSAnZWagAAGrIP/ivOPaQiR36P5QN4Nacn\nD5ginEdWT8bCZOvUlXtctagZHlR+mSxmcBZk4LjnCCf4h/JgMB7HiRQ9+XzT\nVQR62heV+HVVUXxrIPv3Yu6T926iSjSFqRpaaJnermB8sVxTuKqDVYL5kyka\neEAiSJ2DuvbSQig/Gc+PtRc/wMmUTgKc+ikzZsfFeQ/axCj91KKXQ3xXmycq\nyGeVJ1uzgwaLbyiVs0v1HgmrranOldmuXy/g6gYPMA7fr+h/aTV/Ewb+G3lC\nLfYnJNbSjBAjpRMDH6zRyphbvsgH3Ih6Ls/NjlVaOmHJqHFdFjn9h/XlCEVk\nUJC993NgrY9PEWuyuvwuu4ZMFYjdLKaneh3U0d58rIDuQqE8eERyEBbEpF2f\nH3HF/2X0YmSIzhqGP+Fg22h3ZJtGF8pIujI+eJt9ctb+cg8Z+2qa3S+Lo3Sb\npKhyITU2o+0UxbsSxJK//0gD7jGr09QRYzxklig/pTbK6cREp88xb9fLkHHS\nLFKtreLZDSCZIh/p1nyuS9N6iXVs65tA6AWxbVoVvNfwknR3EeaMQYaylZ4M\nq2aT6HfGILS5XI3d3J0pBE5uqsoZOaG5t4+NkFLIMA8FX8cTn61/Fjh08fFO\ngvZpbnv9gEyr//BnRqN90E10pLGZMu3nSXOs6uLbkcfQGsm3/tOKSU4BBv4p\nX7TA\r\n=eOMW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/2fGPAKfwrgNvfrKsrZsO4kCtz7DaWlDvo6+TOEbw6wIhAIztEIZP6sTqFFuw2/2GI9S/Pb8qNugR2pGl2KAQdnps"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.5962b365.0_1597868976494_0.3560215699109408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c9ec756.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9c9ec756.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c9ec756.0","@material/mwc-tab":"0.19.0-canary.9c9ec756.0","@material/mwc-tab-scroller":"0.19.0-canary.9c9ec756.0","@material/tab":"=8.0.0-canary.da72839f4.0","@material/tab-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4c887788f2cb30e8b788a5cb0a1a13dcb78a0961","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c887788f2cb30e8b788a5cb0a1a13dcb78a0961/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.9c9ec756.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-t71rWOxySatgc4TTObk+OuVe4cFMPQeZhlltZ5mfIkacFXATMXEPCOyiTDLQwK2yD1NrRsPxdk9ztgP8eof6dw==","shasum":"25d1a81b53e661224d08d73011621c87df6d3477","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9c9ec756.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPsdYCRA9TVsSAnZWagAAms8QAIW3co82uvCqO+EO/hHi\nM2W0sLaAGcgiOqtLdi2rPwYx+ZvOsFC9I3P0VN0/wmjvh7WiuvbPDIQJkbg9\nLSL6o/cEuVH4OiLC8OKEmG4f0uu7tx7xSk3W1WFVzIm2rf5DvQ7BOtew68w5\nBO5bGjODyZPTKewosX8RFdMZQBxrNYw2W+o/qBVHlV3h+NL/28uNnhzYvDko\nUzyefD85VmNxAxaB8Xn5LICCb/JufMza6u852+vSaHVhtjT3osXEN2cDft0r\nsqNWIoI5Wyp/I9askvAddn7XLE+jM+ZHObcCR4qUabG8m46x84/yTIuS6+ss\nH8efZoYd5eQDOc+Fez7vN2py6x+f234wjWnKnWroC2puLX+kxfcm6ckV5pIx\no3NYP3EL1gQW8XpwX1cjLyr8PxgnjUO2D+mfgMTpyp+0Zyse2Coxmm/qqmnx\nWlR+vSoeA5ODZtO9ysSCQcs13zYEFE+mMu6H82ue6RYHxMVgr204d0Yq9pOv\njEoVJtbM2LkgspyOA4TRjpNxHX2BLOMzKKKQhN5PZFbeGJABl8elQhhUibAP\nfXJusrdBKhW5tsrh5MIhN/Xe5e8h7krQraLxyfYADzUKIiADbZccLYZr+yZL\nBfsGbZm1k9d2ZKeiq0bexrE6q3XRZ9SgRr8GMFewiNdY2gITSIiKyLgWsPYR\n3LTy\r\n=KZYW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHhVT6L4K2o+vPSy9vl/o9NEV2hP5cGDLQSkdEHYrs6fAiBJvrW7NVxiSUrMe9KXLKoTVMSuHhZmBpxNDl21em7KCA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.9c9ec756.0_1597949784165_0.9723473084007477"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.fa0ad66a.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.fa0ad66a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.fa0ad66a.0","@material/mwc-tab":"0.19.0-canary.fa0ad66a.0","@material/mwc-tab-scroller":"0.19.0-canary.fa0ad66a.0","@material/tab":"=8.0.0-canary.da72839f4.0","@material/tab-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4020241262a9309827adc8467ba4c499bfab71f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4020241262a9309827adc8467ba4c499bfab71f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.fa0ad66a.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N/JaEpXt+6ZRfUBIgQVH+9w6jobMHz0KB309q25vMlnCELdLXxU1NgwUQuERXXhBwyuVFinSyZesBrlHXN8Row==","shasum":"edabade1bd3cff6ea8b14cd53adaaeaca07a6941","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.fa0ad66a.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPt6SCRA9TVsSAnZWagAAel8QAIbFBzQDUJU3dZ+y6Nv2\nmkHEPj/uHBycj5ybUk+LAxTSYgt7x1zRJD0zTS6lYuhE1R/R415hgx0s0Jz4\nv3dfFu1HQyFH0AoxmXWCOG+YCesWn6pPSUmmqrU0HyP+byjLYQBH4tXm0Ze6\ne2U+Gf5MSgZd3UG7Yo/g81N9rFDJskaAt4BxLYcICanBbBYSEZPBkxd1KpaG\nbsmxjsTTrqkbqnxTubsWcrmvJMlBO++6ifkbjahBuI73R7/LF4eOQ/MRigkG\nPUW7mCJDoqGeZDx5nDimQqq9VTJNiX9sODSYQ9wmNYmq++MRj4U1oC+W1xbn\nhgv3BOY6QbNiPrWML1Pnf/L0A7CDqlITJ+F6aVvoXpPzHhNhXCp9U5meBpF0\nMarIyUlTzLDo4fLoSTulvYqChRM9Vz06z1kjouqQOrV7XGKXDSgrAKDpAeqD\nMU/usqlxtgitU/Xe8e0rsOPtLKUX+Vz78XwQNQEr3E80pI3X724TeDrQsX5V\nOL8kcdiuNilA8jbQIM+Fe40mXofGcwURbPM/jYiVoTROtNePwOvZuUTox+GA\nOn2RlpZOQDAMkeKkBFIoE3FFho3zg5rJp7rHwIKz3ccfvqtN/y1/4yIeeU0H\nuZco++X6b5/kqFXFgT+5J+0MyFWTb6QUFANZmgQDXNVSoYv2qOblFgrDtnyW\n1Xo3\r\n=lTx2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYL0FDUd/qvGjBLT0xKwljKpnvyLxo011fJZFldcRIfAiEArobZxsPiSlsV5RJ/HEZdSqL1Ls7VzTbuac0QTzixT0Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.fa0ad66a.0_1597955730512_0.6808939995921826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06ecdd6b.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.06ecdd6b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06ecdd6b.0","@material/mwc-tab":"0.19.0-canary.06ecdd6b.0","@material/mwc-tab-scroller":"0.19.0-canary.06ecdd6b.0","@material/tab":"=8.0.0-canary.da72839f4.0","@material/tab-bar":"=8.0.0-canary.da72839f4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"35a2331f3c8450d35506d4f0b54075d121a2670a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/35a2331f3c8450d35506d4f0b54075d121a2670a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.06ecdd6b.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-jGtFZ5Fb8qyzQvT0CSS5JxbUGdj135M3cVGfkmNq8xAGnt2HdXjD2wBW3fHn34722sfeOOFiQBBxU1+m+VFqtg==","shasum":"4aa8fd89a75c247f631092a09990aa5ad5a01886","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.06ecdd6b.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuxkCRA9TVsSAnZWagAA8fcP/i0fAPDPRwEWXq3+ymq7\nf4FcrSQGtrB1RP1cjDRv/0vviRb+vVCquorlIwrothxdBVW8e+XswrkdumAH\nTW3IuUHmxqcegIQDMm8Kv9VkElhHrpzL8bsw5msAKg4i+tC1PiT3O+MWfovP\n6blZ1rnL2RaEvwn+L1o/3LE7AZnZWEPjCOsl6InNDJ6Gdfxd2X8HYqosRW3B\nus1p6uVmOI2L3c2eH+MhY9GSvFyF2oaQUBeUJrniDlgrjLRzoGoj1zPUS0s3\nhudZDCH84I5LkyFaE5rcELUo/8Bl7PfCqsXcqRpkrjdZQ+N6gLBHKY4exXDD\n2yd1iAVDA4TA0DJmIqNobPFHKsZlkW3JqKAIHAYJeivaXQhdVWz4RO3u0fNZ\nVVzp4kxfouUJn62HKBBpE6BTFn83vNLqJ9IixzqrPubtMqdnafuOw4M6P3QH\nUQ0urUFk9hyX+9bObNfEpMDaYMzoP4LPchVzRCdO1iNTqw2bkeFzBhSkVTXT\nrlU4opQsDg0CAKxzb9fnpZTvHVpCqR3p5vjOE8/RjL5kszFTQ42/ZrZ0dXgq\nWRAStrbLVs4znK7VqOBFHSjbBff9Hy9gwWu+I8wBC8dEvmgGgViGgu7SAtWE\nVPlDcHe7iRWx/54K92MsCCFoqhTx4Ln8rr8np++wqGyR4/3xs/pR5+/BNILN\nqREu\r\n=iBbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDR68e3V20NNkUcmPrUadTH54WyynlNlwJycYhgLKLbRAIhAPTq4in0y0QbaHfpIo7cHtikpUAuvZO049PdGGMfvL4c"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.06ecdd6b.0_1597959268070_0.5108848783920912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.2bca2318.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.2bca2318.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.2bca2318.0","@material/mwc-tab":"0.19.0-canary.2bca2318.0","@material/mwc-tab-scroller":"0.19.0-canary.2bca2318.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","@material/tab-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2e3f0ca806ce8930df2251177b8dcedb9deaa8d7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2e3f0ca806ce8930df2251177b8dcedb9deaa8d7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.2bca2318.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-0gX+vCCHw5abUoamdXSxW3/4w1tl6OObS4+Ffi/Q6gjy9sAhJ5dGXvLbuoC/XmDWnNtnRJWwgSS3HGht7euXSA==","shasum":"951579a504e798e7ac4b91344cd9044b1368b81a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.2bca2318.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQAn+CRA9TVsSAnZWagAAQxsP/1rfd5ptdLviCuRrQjVl\nYxmW6Rqh1T4uNAnaV1pPnTkMj5zXX3JS3HGKvYrGTKLW/ZGR5/z3lAku2j27\n2g+G9x7GG75mI4rXwxWQczEWDIO3vHg+Pfquw5oH7hPrmZ8mX/4d2magQJ2O\nW8GHnnugprfhjG5JcK/AOoReoU9g2GfZiLecC/HW9K51hF/44PFdcaPASx5n\nAoeWfBTgx2hcvIAGRDP5vHo+ThwvmZnQN3Iqc0RW/VD9S2Rsw37i+R2yxilJ\nmTPGC1jO8kEE4+m+2W2ICcmdYMlpXL5gSN47ojb33Jv30X3h+DhieTnvBScX\nIXnKDUVgcUuxMVaYmbNHuDNM2rP3T58ro3qbQIbJcUVc2oUHN1fx/VkomAQe\nwm5+VFu9+U2A4TvaJJtNEd+gqKhPIPq7AxCGX3ibgm6Pv/gbEkpOhT8iQH/y\n/vXg6xjEu/gIbL0ArSCvdJD4Dp0DqNgcX7G0CX5OdRyYbVdoXhmCtDl0oB9p\nyUJKLxvsmPvsBC/lAHPDevf5h0xoaccsappsn1lw+9ESpnXpSeZQOVbZ32rl\niV9g+VGwPwJeq0kWUu+tFjsj+CWbGkgG+Rcx0w16jZOYzcYLTX6bDbm5xp0N\nD9FZhl0GXdIwBqaB19JanTkw6dea6eLORLTZNXz0VfSAK5JT2dY7asAUDo8W\nZfVn\r\n=NmPK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdL/vGzoRQojbbV8ckqSGxzcx6vP5qX1QzGLgxp5NadgIgbeylV9DaETl33E6EdjbdBtSq1HbNQ51c0uLY08bBk/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.2bca2318.0_1598032382243_0.11664821660887359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.6aa47265.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.6aa47265.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.6aa47265.0","@material/mwc-tab":"0.19.0-canary.6aa47265.0","@material/mwc-tab-scroller":"0.19.0-canary.6aa47265.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","@material/tab-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f13aa269065b757dd289dd89367756db80da1596","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13aa269065b757dd289dd89367756db80da1596/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.6aa47265.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nDvNje04rD4bJi+wOZVfUTs5fOFpLhlSFMiwC+q0AARzG2cVwfRN1iAGVszVBxk+o4o9i/eCZ8AWvMN68PWLdg==","shasum":"bfc3d1b93376199abe568bfe2a55c079cf45770a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.6aa47265.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQA+OCRA9TVsSAnZWagAAZIAP/1KEZyHKfn2j7s2uFDK6\nealx5sbhRda/fOaqZa4B+/N7NC/B76PTkVQq18c1CmyvKv8Y2+q/zBaZwHEX\n9p+sgp0CFKVn9I9cH5x0VTnPFHDi6XSjQ4PS+HsH59xs6E4JsXOREeJ5+R8R\nAem/IXAOdQ0pewGbvJNsrjoExdzpl6WdNdGBngj74jbkqBFqBu6EwWYJjiLz\nzs2GfyilDDu8gU90fe/gDklvIotYRHn0LYSWSF56uuGJF8aJKXlCwpMLyeIj\nL9TCkENYucVgjMvPVFyRdcDi5EI6nGjpmn1+jq7s2NtWsNTdTimnsM9arqb/\nDa9stkvcQqEViG8z11ERF2apNuqd4Alz4BKsrwRa+79H1waShQqhG/wDja86\n0i0gyQDIkInDPnCzn2sX4WMblk4/LRKILqg6JvQ7JYQIVYv0EWTWw7aMy+ED\nmnEAnwzueAf9p0zsuBeVkbWoyPi/djtNx8hpgWGQu4Cw/9LuMJ06Yys3DLbx\nQ8pshCa6w9rpWTdGXt//QP1oc993StvT6ibt3IoeN55EXQWH73bCf0xOwc7m\nLk585z7tTOvqK1Y6aNnWNEnrIzOqsE0qw/fXlKj9S8tDbv1L4dse0YxMDBEG\nbnze2Vzmilq/ryFnqLJ4N3/6MiuZrbLjLwHHI0qJ5Lbg+YwrnSI1rKJOfAYo\nQsAc\r\n=8lQR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6+wjP58Nqt2HAwfepvFIcho7tVQqXpCKFAq/qHVQHeAiAE2cDlOdERxg+B4wCdDDv9rMwl7qVxSQp+shZjDs9A1Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.6aa47265.0_1598033806194_0.44132417706221894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e7202a07.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.e7202a07.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e7202a07.0","@material/mwc-tab":"0.19.0-canary.e7202a07.0","@material/mwc-tab-scroller":"0.19.0-canary.e7202a07.0","@material/tab":"=8.0.0-canary.95e4eeea7.0","@material/tab-bar":"=8.0.0-canary.95e4eeea7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c2f6251cc1ab7c3f27cc51409b86305fd50bd2c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.e7202a07.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-hvvx9z/XHvh5M4/S7YBte+lkmoC26dALVfGfccggsMj3naPmRuVrQFa4gM5Zb3+SCw216DCSGJwYx24bdvHyOA==","shasum":"8e6fc12e3a2c17d6d46c76b2f987b70156c78965","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.e7202a07.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQB9dCRA9TVsSAnZWagAAp9cQAJ1AwuoRQmX8vQFcEUvm\nSvELyZCFifE6owpmUk2an22jWPWEAPkCwF+1u/YxmfR97Q0z46f2iDlO0Fci\nEbD3vHFRnlci+4Zt10fiIUOC+YycYafKOU2wndjHsJs6xy+skls1xYdhN5Tm\nTUdZzaLEQMZau7h7HTlXt19b50Vmh7M7mE2eXfXQirvJabxewolBNZHMK+ME\n4HKFeG1vzGJoLB1rXkomvh1jCVoTRBtb62xurtbSdenHLU7k7irV7ygceSrN\npiC+y5zLqcbWKz7x2kbmXhmixpBT/ofl8xF1YTggofTCSMTVW/6W/5ZZ1Fbl\nBW+3U1TDQwONF4rfK4JJ4hbnUOSJNlvSg5WLZw+vpR63AqMtYHMvkBQtL/f6\nHC3+/pCV7Ona7onNFyD86XOxWzkyY7qjFhFF7v0uaY29AZUi/ewfmow9oddb\nglrDIXpCvHOVEcbzmvVDO6/Wi067vyGFRiTADqUwkDBPO+UuuFAb/25scCJT\n9ZQUZ0+x5ghsgph1FalQ56N6ntoNd///g7VJwWP9Fs3QeVUPyOFbq6y5mUGY\nUmXbi8CcrE5GzIVVAf2KNp6QXqNp4QfeZYfniql1zmTTmNImnRP0IzufqgdA\neDtOH8DJ/6kNnLlC0jklQqiKj6/YpkwjMVChoJN/ccPRLKBueOCH/SNWCEIV\nRWAG\r\n=MN5Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5e8jRV6a8l2Ck3wBHSL1zodEssGidpek6LDtD9+TErgIgX52cNJKDFAaqmXxiNSEKTPFq3b1FxqqLh/iA+hq30+k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.e7202a07.0_1598037853075_0.9958611066809182"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f208201e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.f208201e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f208201e.0","@material/mwc-tab":"0.19.0-canary.f208201e.0","@material/mwc-tab-scroller":"0.19.0-canary.f208201e.0","@material/tab":"=8.0.0-canary.238216fc4.0","@material/tab-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c666b3346918d8521008d20fa3c20b4cfe3ee481","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c666b3346918d8521008d20fa3c20b4cfe3ee481/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.f208201e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4xKXEmaTBl0ptqqI3q3nNEs+bB+/LhK1ZYZ133/Ykw3bZbK3bUGNY4vcfKmLK52VPM89/OIGRIewWt9x1Jb4Pg==","shasum":"39dfc13fdcf2e6408b3f5b89931158f02a29354d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.f208201e.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRA8OCRA9TVsSAnZWagAA9CwQAJMolwqG7/XWUDUCKExl\nYxjNzdeGiYyhZ8Z2XJ4Nnr66qQZ4qCFtyyF1twHNmjmjtbmAw5Fz1vDpFWlV\nTRWAHt7YBClL6AOtd7DbopnQcUbpdinowv5llPVJVyPtrYs3BrgdI464C6e9\n6P/M47qReWld1vIcRmw/BFgZrQ+sa3SbGRamHX7FSCt/E9715Z338LcrT/WF\nawf80uPMbLh2YSkVzxBYwMX2StS/Oh5GoiikOchXuxtJ6HydqvDehr7/mio3\n4ZiWvf9Z5d50WBkhWmD9gUCgWixCnfIga9/PKA8J3PiF8on1C+wHNMPSmuB+\ns0xO5Mkkhh0klZyjJU0Ebhu/UggwsX4uGJZCaP3a1Qcie2uD8uq3Mtl1V+UF\nUBjOLzx333mV+V3aDwCOPc0YUjsyTHQJraLXOsi9BDgvLLZs/TicEUzXmhbb\nI20t9rd5qPWm3Rgo7I8M+FtPqbqsh0n+El+UwtNgCtOJwRNLplMiQr865m6Y\nXakcejZxUuPVlufeiwCE4AilHjwKLaOsUxKe5wKGPszsXBVZ+/zvv6e7jUlz\n4Ijpsh8DjR1rMjuF4CV8FtQAkflon5d7Za+T4JqoAM+cSicIlavmyyvPvSYX\nwomxusxYs0OEiVm7LiF/0R+LwLEffuOyQm05veiw3OSh46Z4a0omZcCwconV\nlsOY\r\n=wMpw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHyFVLPe8CaGXP1yIBh1X0rzFxAHzSsz6bWydbkS9bY5AiEA/mllieI2g8gIbvX7JdmPsht6nlhVGW/E+Qkjietrbco="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.f208201e.0_1598295822390_0.01260651652864575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.14a172db.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.14a172db.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.14a172db.0","@material/mwc-tab":"0.19.0-canary.14a172db.0","@material/mwc-tab-scroller":"0.19.0-canary.14a172db.0","@material/tab":"=8.0.0-canary.238216fc4.0","@material/tab-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"dae488440593f3d8bdddcbf01a3a6b5343d88761","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dae488440593f3d8bdddcbf01a3a6b5343d88761/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.14a172db.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-S5x7L2jPtWVUTz7ojQAmE1hqEF/Co/g2rCTamdssx+Kdhv6lac8WPgxYn8wOr1qymq+SA9/nKlvilo3oTk0kjQ==","shasum":"cab8f57e90a8d381d1d8b13aa64ab583890a068c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.14a172db.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRWsHCRA9TVsSAnZWagAASL8P/jBlNlmvRQbtww5+7cqu\nX541/ECniu9Wn1hdx4hwwu6nZ1I0HtZKgDSDhopqdSr+HFaoYUVjPDfDrO2i\nf9txevNZNksgy/O7LT85wrWIOUguzYouKBhnZqCMW6lkex4QYV8Oj3N1z2E8\nnnWB/tODhiWzddnlsmjKU8S4vv9yzoMx38R3tc+qVAnA1/0nISDSQCvzufKy\nnDE4yRbHeoYnM68s1LHoj9e07pNhsia9zwKevcYCwm1EUZB70haNVWgra/4O\nRiqA9Hhjv+9t+wyOCGzOFUL+T7j+ddsS4pbGsc2DqQeLQRvmiVLsTERO7dqT\nogmmK3hWt6bSOdGmcJgOIrxpCQekSshYpE+vd1fyUA09fCx4/9iuohBJsxkl\n8GG7GxPhaP4vBvT/1aSl5fL1i1iBSRRmaL8GOjt2JttSHHMiogeWTIPU+a6a\n/CezALVuP9umVw6q2fRwTlyPADNaZZ+fv7Y0bNokOqhHfsCd8GxahSZOSrv+\nRE2GWze3BT3dy/+CCJ71nlwxFcnksoumL4TLhR58/cfnsvgRFrrics04IKbU\nY8gsu8o1vOVgq0Thj+BTWDolk1U3My1cOn2VVKENWGBjTTLvJLdGt1BPy3fC\n/zA7rpFhz1J2GEGSQBtuGxTFL7LVRkqMQKLypwqYtJ9ekqYzxkUJKC3yaI7v\n0Gcb\r\n=8RVH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHcMcgv9dPYZeehvxyBp6BcPg94WyzgLxfERL9vtfJBAAiEAsFWt+I/uznzuUKWDX9JWmr8D83mdFJKAfj9zpsS1XBc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.14a172db.0_1598384903043_0.7480546965270729"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e6c1038d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.e6c1038d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e6c1038d.0","@material/mwc-tab":"0.19.0-canary.e6c1038d.0","@material/mwc-tab-scroller":"0.19.0-canary.e6c1038d.0","@material/tab":"=8.0.0-canary.a1c65593d.0","@material/tab-bar":"=8.0.0-canary.a1c65593d.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6629a242b77f90688959f5a54abc55be3a2dae2a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6629a242b77f90688959f5a54abc55be3a2dae2a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.e6c1038d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-X2NxZkkBwf8ARdRgE1yh8bpGNP7FY2103qy1StwKHmPsB8kRwHRy0V3W/GUKLsGkrceeH7KRtbAFBD2q4H+ADQ==","shasum":"de570946d38029e629087f04c8e269b17db6fe6f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.e6c1038d.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSAuBCRA9TVsSAnZWagAAVfcP/iHIYfisvMCqU5c6L2uR\nWCAg777/N0vNU+bbGCVoi2XWgTQOYLTju++P1Ni97hgQ9IxfFnekOMMSrUoz\n1ABf2dV3R26ON3cOjv2cO5RX2r1epnlhIRKVt6/xkHPyACjrw/s0lLZfs6Xg\n4gDmASUoDGXMO00S+fmdv6tQz974BmV3JQxiOSvX49qs7ZsImyiPlu6VAzAp\n2Kic1S2JHvkXz65TKQgDcYUyTRNJVac1QCVqQwjAlA/+SLNrHG3MAvwjWc3J\nu/zuiuzEGB7sfQlHy5R4gBOqfENcFbVtwDORcUFNeb9jI1DT8qpnSptNtYfv\nIob5jpl0TWis8PY8bmmNQtndqlfkt9EpJxkBDpBdrVGLhFD8q7IGAtYhR2ig\nOheMrppCg6iXbQav4vZTteXqeBcqcldf12AukeSGj2VLEE6SEWvn67jrWBV4\niYrOT1BveeoD5iL7OejHymNML4FFUM8gjOtHaCs7odGkiNs3TH+po3yloLrD\nR5F2CV0oS70LW6Job/hD/fKbLQB3MosE0IOEujuknrwUh5ApgzxOgHVVirKp\nJ9MwfGmyhAARqKB0kFG8oC8wqDfHOXyqUKmEO0q3QbtNTTjmrReiC7UzIdWu\npQwL2hnq4hpsVDSq14LLOhmvJhp+43WR/pRp98mmFln0GiWcwgTE3YEywEfK\nafTl\r\n=D1ZG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDzD269v3uLDx1IIjcxBCJMpfR4sktLqEUcWzSxP0EPnAiEAqo3u9AKARDiUsloSXbfEi81I4ZwIfgxm0cjGXMnfeFQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.e6c1038d.0_1598557056682_0.43974008590774494"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.34012082.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.34012082.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.34012082.0","@material/mwc-tab":"0.19.0-canary.34012082.0","@material/mwc-tab-scroller":"0.19.0-canary.34012082.0","@material/tab":"=8.0.0-canary.238216fc4.0","@material/tab-bar":"=8.0.0-canary.238216fc4.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2df5ccd57b9ce1a3c2b3ddda99e7e7d8b185ef26/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.34012082.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-nyT+QLOo8vQ6YsNIqoZaT0S6DtBw0wVgUS9g88V5xoevd+Lk+AbPZzU0DmonPHRkCUAIjY8eaH57jtB00kHQjQ==","shasum":"413ac0c64cfeafc22b18996045a2d0b7f6bb7a7b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.34012082.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSA4uCRA9TVsSAnZWagAAwZQP/0fmWScMHxltaHxp6tV8\nvHykR/B1KjLSHsjySVPMe+m4EdItyAvdZttB210t56j9rVR4dFv23nUsc1Yk\n6UezZXF9jkjpor8pH70VJ/+pksH7fokY00LgDb8/w7blI5V1koB6xk3FeIfj\nHK4oXylpUlxt9/zm/X67iFiDsP36Gvy0uqqN5F/AScPm5z6k+28mC1+VkBVJ\nc9NKmyHnwstWo1gO1L/20YOq+6BtgEXPYGdtYlSOuu2kDN6oskk0gKhMHpfE\nCjhNNGLXELVAsM0Tt5vWqF84P3vSgO+bEZo0oDXQnu+Kk1LrtZ37eG8gLZtu\nH7tZQE7pPL5NcKLpHZE9ArTVLWrkAEqpRGX/M/3z2p6eeH8Ah5Zyi35Riy2P\nAfX3JJx7EZO/S/n7T5Zq5/ZfEDiNL9uwjoohJgl5q3p4mJYaAAgENIBVoh/4\nvV+81qZlbvfXb+Yczm3XlFzp7CL7jpFf1VzNB+A2Cgr/+FhonlaUS5tQIdWg\n24sDpeXOBhrlvrvDisQnYsLLNrknYLo62a5vV46C9rgss7qRoUmiFBViMrfW\nAUbIMkugb/bpSdDo1fAt0EzvhQZBmwPR9sGr9kGgNoEpDZcGj1339feIWZEw\nGCR1hnk4zpgkEpvsN6lpV8Zok8KyVyj7XiLZtmpCrZ71DsmzJA3oLv6kokkJ\nn7WV\r\n=dPfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC6tsES0j4oE9z/cJyF1vPZpMbcGtnV0ZPgOgV3B83zLAiEAkxjd8EbDaaPB8TpX0ccmUKqkS5v72UCgfkQZFniqSE4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.34012082.0_1598557742233_0.7914923434301557"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c073f7b8.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.c073f7b8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c073f7b8.0","@material/mwc-tab":"0.19.0-canary.c073f7b8.0","@material/mwc-tab-scroller":"0.19.0-canary.c073f7b8.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e16d759d8a3de4908c04fd08603483dbc37b1747","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e16d759d8a3de4908c04fd08603483dbc37b1747/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.c073f7b8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-IME7Eyyjad7DZxkwpHcupZGd40H1stu/Q0VkmNi4iyc3r+hgV+IVdoNs6QF6k4l0QiQUBYvgm4rallRHKYBl7w==","shasum":"5aa90111e46836b253383d7c8e103a719653a52e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.c073f7b8.0.tgz","fileCount":16,"unpackedSize":54111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSTsJCRA9TVsSAnZWagAALMUP/3HGk4Mskrxszcq+5DBW\n9MQPzgEojP27YxU5WSopLOH9AtiDybADznp9+BBtEji5qVAvOw4yyF0sywU9\nymiIqC+IARdFOhIgkoIJ8IYxK7CG/rTTg9SgCnBnVDzYI5AKhSs4V0/EeVIT\nkzUJCqQZGCIxCtREk8EZFSKZN+/bh2TcqFCXkyJcKKUWWgBPGwKtqFOqGmqV\nyKClm6FA9WgD0eJl8nnqqIaF+uhx6j+oC5iFUPx8vNLn8xuJ+t4PRurazUp8\n/4pYSXFdJgDJGBCCBZW4FkbxzQN32dS5DTcNguCaObp6+ivFY7lVrV7WgtQH\nD5IDh76M9EyXmFeliOcCDhd9In4/EvKIt9nr9cploZEPqfbXw3KBzSxFA+UK\niUyjv4i2z0RmD04WRd+6RYXNoAoyftEO6bQ+MYDL1c1w2auBOd/NRiXgxSpq\nGg7IALSXL1ecWTk/q3ijxXg/VPyoPMybwr/J0O41i4hli5G6Qc47gMal38H5\nuT4X/60WMYXDCiZMMHbjftUd805ABM8AViumJQhfS3ZGDpNK+OjdfZCZ0JZC\nDgA9QQI6gasOCFccCZQNGkRCMnB7c110iHnsMsJygBiohZRhF+0i9KpXru4X\n2V9/8pEvH1VzejYScq05mwU48zMvBJBtjLKjSbRphfBU1jcmS5fJtp1O5OxS\nGPW5\r\n=5tIV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCBbbAPKM0oH9FSSHSIUP7Hi2VUxSm/c0Pd2yzwOPytpwIgDIQFIOBgMPOKZv+85vB5EfWn5ycjbF7CzQ088+BVqcU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.c073f7b8.0_1598634760933_0.355647549949905"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7ae68ff.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.b7ae68ff.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7ae68ff.0","@material/mwc-tab":"0.19.0-canary.b7ae68ff.0","@material/mwc-tab-scroller":"0.19.0-canary.b7ae68ff.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2065ba1bc7a6ad7aa6a2c0404136a31018fba984","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2065ba1bc7a6ad7aa6a2c0404136a31018fba984/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.b7ae68ff.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-3yjiO0dS8DK5Zz02ZVd+vvIOwTSDELmNjPMxbhsKoh5/NpQh1LuWmmIUteQivFqe0qorvcGt5GTH3pYI56bRSQ==","shasum":"40676518eaa985ff8d84c6be0efeb2b3ecfec46d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.b7ae68ff.0.tgz","fileCount":13,"unpackedSize":45612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfSa8ICRA9TVsSAnZWagAA04UP/1s5R0dR86w6jOy4qTTe\nsqrfihTVDTCvaOFH4WgnikpuidREtQP6043N68jhDtBCBUYQBHuZjWhnsoIZ\n/q8mPv554fSrC8h8nhO+QMm/4RHA/xXBk3Ai01ZUwSj5Xu66deOpwjIf4V6l\nUkQSLavGrbg7JB4RyGSITFz1XAdxRuVpJ6PAZKJdN6sRmEMWHRX60klZPEOy\nTaVDzv/Eor+MHKFa4bIDmrJxTwzWj6e9XrS2O+nRquk0HVqL1aaAeE6Jp/2j\nJT9rC7dgEZLyqaWzu2dfST+UXcb15LfIhxXcewwxxPZCzya+BVZ75aTFe7eZ\noUnj+Gs01FVpccl9ewTyKw+p1fQNJD8LoWc5oYH1v6iysXjGIJl6UJZjoFDz\nEvOZtitAZMpGsC4tMwOzixvaomg3nauAmvJi1uHZAkYiuxrnB12/8NEZVHYo\nqCj+r4HCW8dhOLCL6sb82Xt9Qd6o8RCB2LxcijXrECKYKlx/QmrmISqnlUfr\nQ7InZXQDqQrv61Q7bUFnM3p0gHHD1oMuFCZeA+W/YB2nkDqOVmwCyIrDm5c0\n4EGe+dQ9lgYWVd1xVCcGy7ksMX5orlsKlcvTuRfuFgHUKeLC1gCCiWoj9hKB\nEcJMGW718M2MRHwZxa+cTjmnGD3wrGN8UKMVjjPXkQL7fXMPoi0vtvmxAglZ\nsmNV\r\n=dH59\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFXWKSfJhS2Nj0kDyzUUeNTCwdtOSNkGb2IjZZchuJW4AiEA40kdsm7s6biP9FR3vbwj0e0rDqrbzZ/YrZWrjCwPE8E="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.b7ae68ff.0_1598664455738_0.6301744748560116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.697e3879.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.697e3879.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.697e3879.0","@material/mwc-tab":"0.19.0-canary.697e3879.0","@material/mwc-tab-scroller":"0.19.0-canary.697e3879.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"beb4a106ec95684b6ccc8c4af64c083d8462c917","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/beb4a106ec95684b6ccc8c4af64c083d8462c917/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.697e3879.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MsxwnUUqmTYRCWcpaFpkbTvZdLSjphlLv7YFsx5J74P/mXC6g6TndrmBx0dcxRFzYjRdjFAqpvbr919M9mCJXA==","shasum":"a26cfc261e8b3ab262169db3080d4574fe926745","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.697e3879.0.tgz","fileCount":13,"unpackedSize":45612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTuPDCRA9TVsSAnZWagAAQzUP/A5jbIo5I4h1L4GaIPwj\nVzKIeG2FKhFVhcVVGJojos2v8qKOzV45fPsNfUMe/UoZVuSfXxALquM7dsdF\nZUc8X9BfeBo7hVSBEBCAMMMbKpVeMYs+Zy2gOheRFk0fdqMbGNpjuWeQqJmL\nACPYhLJGBuiD5hVEbmJLyIdNABGGiZ72j4CjWOJDsMJ+BCvENzFA021AoGem\nJ5s8VbtXoss4R6wn6EhULkc2WRF/59ZWp0vy0zmMAKA9mQ088PUgFULmhWrc\n2NbaTnHVsbXNRlyQss3+feL1QcC3K0ziNk3StcbvGuCK12igoONm8G9/v7hD\nK41EbcooKyYvwoB2MU7B3JhUfcSgTYLYXkBa7GpQoDBw5oeMMi1dTnNNSxQs\nchmPu9QjCA6E15tE67ZuFzBzOxkN4yvqOmfCMkW7ZVaPzPznvC7LdJYz48/a\ng4tsx4BXV48ka4cICXEOIVsZMtMw0Sg/RYBq5v4BhyRphT8PKG5xtxfS4Wsp\nt0JbUVP4C/K/4Gb7t4BeqYJ6lkVMPci0iVLUaB2Om3RPZLenMppD4tB2bQk3\nH6SMT4RZczUbH5rJv/RnezyjP4a+354bJNSm/z4JiTSOEJJI/QeryC6B8YLL\nMnXgeyefuCUT7IwOOgcbBHHZOy2XzRGNQFQyIkeXxH3VAyR27ANVA5CAAkiQ\n00s1\r\n=hWoK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBXXaIUdd+AP7eyaplLfcxwXEF5/eo9uAfhVNY5WB3JgIhAP5Zc+fVtjbS7bto+YfJMuIkHRHgvD6LsAtD6G6GmrwS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.697e3879.0_1599005635415_0.164815704580771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.eafb7991.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.eafb7991.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.eafb7991.0","@material/mwc-tab":"0.19.0-canary.eafb7991.0","@material/mwc-tab-scroller":"0.19.0-canary.eafb7991.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98841f8d9a2c624210fc6f0bdb87082222279e38","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98841f8d9a2c624210fc6f0bdb87082222279e38/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\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-bar@0.19.0-canary.eafb7991.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-oY8J77DnyOhLhRFwP7GxlDpKev+I/4FMC2Wnz0Fzvi22QU9Zi6FVh6asHpneOVt5RVKxvyK3qgDuDxlJKH6mMw==","shasum":"12e2552d3992cb3d8a517cbbf015b8cf13750269","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.eafb7991.0.tgz","fileCount":13,"unpackedSize":45612,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfTwEKCRA9TVsSAnZWagAAKM4P/iYs9ZRH1muj4tVKRzwW\nUYQODSPQttWdB8E8qFGiS4CNmFqJQHnYb6qm65eomLjgLEHoDyfHRRKgHNnr\noJtFj6rrgu13p3w5ZPj0wBvGh1neNqfkelBnKFXczCvFkSyMcxKOPDbUA9kg\ntgzuMjHhh5l46rfg37KzcVKtxUO2p76yDgY5othYexV+AhEW07rmuQb0T7BK\nsIRHOOBxxhmvS/d2KOM8akCX8igsjrtHmtr7dBU3SXrqq+pa+yjE1zzFwkWY\nnoxQr4C1yzfoQj3fHvgRd8JCkT5+8FBkEqLCI4pW8xiJs8XpqqEYPno7wuBH\n7vXZI2SE9FHjD1njNZxUF7kyWHUe5vHDN2PCxKZ5wf4y92zaBv5gvCWwUFAD\nR1+DJLE4qFbiQWkJtZF67TCM35f2xJNODgZmSSV6zBCELSpg87slDO3x177S\nFSsqkS5p6P6zKeKplFwCPAUjhL9t3kemUqd1ynSrGci2wyE1N+QP7eyrTvZY\n0KkvIiw+y5inqZz0w2NrNfAXJTfDVDe9QKziELC1w89BibkNx/pfrHuLuzZn\n5o/3VNtjzIZVaMQosaGIRS5NEmiI817vRyV3RKXAz70KOo40fwQk79/478RL\nXXOinhBdKpuUqFBYI4NjJLZcdHFVclk1Cs0nn3IcTKH3A8zedUtO3bDEJwJ1\n05U8\r\n=BHx3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC7qnrnwcDgcgwNRwqxvO3DDRIYTCjuJeINcJOL8oLS2wIgEDSq6OS70qqWEf0RYHIKPKQGeUH1dK0GVcXIqwhMiVs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.eafb7991.0_1599013130532_0.015106162647303467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.606642ec.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.606642ec.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.606642ec.0","@material/mwc-tab":"0.19.0-canary.606642ec.0","@material/mwc-tab-scroller":"0.19.0-canary.606642ec.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e02eff9a35c3b9c054d88cd2c45d44ac7d81db14","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e02eff9a35c3b9c054d88cd2c45d44ac7d81db14/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.606642ec.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bSso7AeoPLhMZV/Olj0/veI6sD4ukrPeYcvZDLHGaFhW5wY8MNdJ7HLXNtePFDRlYmsWTYhMER5FlwSF6Ii8ew==","shasum":"b6309922a72de0cba18d889d9a6874dea1407538","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.606642ec.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUBBNCRA9TVsSAnZWagAAd6oP/j6N9CxmmW8/LJ3PjAQO\nwFPhnhPQWjU3LHm/ytlH/lvBr8AV5RdyfNDwDBbSBsTIFVlEJX5sRmCl1Q7Z\nyWN8kzg3TV7F4/gyayNc6JvlKdn9iOrlwu2mDfZS9wRSoyP+iJO4r/aKjY1r\nBHGHt5wzQWO4Hicx0cXJsnc6HWIBXrMRIgYqjX8PB9ly+Az/FXMzu1Cm7bkM\nd9ACDQG32GcWvFQHz4rxJFXlQOOmcqpFC/ZHcLVCiLrH7uv4X2er1NZns0NP\neL7cESuc4PesY1LvkT9rJS90V90mzs7WMSGRxY7Bbqx3sXgo3C7utMF0PFE2\nmTovow7jE3kEPSJuwkfJcshCexzFyf2plZPHN8M1lGOaAxQC4m7gMg8WJqZh\nalANlULFbt1D1Mk9n1Y/s60zXYzIg2xX7/DrasVhCczvRsEunyPKfPtNyJl/\n2HIowCDMH1eyWfrYNi0Nu6D+msX4sHmULttRkFlSDYOO9x0NXhs4oe+FSCLR\nz7hQiez/VlUeG0+kk5MhlW7Io/7xJ6fFj8YqVCvdfiDpi2ukgaHlbew1+CBw\nhsF31UNBRfLfZ+q1w4HhNyxjdzKF7ZmsMn6KaeXXC6fQOuR9wImNcSMSI7v5\nO4xld9xRrV61dPn2ZWD0j/ZdWXeS1aTGcgH4L3JnznCo0ySRtlRa47xmv4OD\nwf4Z\r\n=i6B8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC93gz/TVf5DyldkB9VSweFxR/wl1G8QYBZa6MegBO3hwIhAO+W9fw6aTLOCC4xkfEzC/zeIuPfagpJ2vzjYc5NnHX7"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.606642ec.0_1599082573171_0.8810080285696311"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ddf05c42.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.ddf05c42.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ddf05c42.0","@material/mwc-tab":"0.19.0-canary.ddf05c42.0","@material/mwc-tab-scroller":"0.19.0-canary.ddf05c42.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1733e660bd96fac32b417696613437f27b2841e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1733e660bd96fac32b417696613437f27b2841e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.ddf05c42.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-I/TeSZ87196KoHGFyavzpJ7aScxq6BYMy/RdrWJl6PUVN6IY2cLuiqtQjLx3q+0xFzB4CSVH8yOtFe3a8DRMpw==","shasum":"566078e0597be0181bc135a53a07575d6db0b291","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.ddf05c42.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPVkCRA9TVsSAnZWagAAmtYP/3vQZ9T/hvSjhWQu3Mp5\n9q1Vjhb/LYugWdU0vJXB2dDwfwlLjmwKvN6GbloNDUN28Rbcwf28k1nppKKp\n9FQWheFhxhd59zqNqnkBQ+sEIpsOlH931A5ckC2MUCbieFhAQHn3UjY1sSQb\n1dHwY6bgM+v8IgsMtA1ZKP354Q/0njoy94F3KVAnAgfsuoiMLUpR862CjPA2\nOf6zM7EO4vzYiWBqlocUxb4GOYXsmr+EZ+09+Uy4YoYUYwccoZLp54mCesAv\nM3ZnaI4yXJCQVNhmDkuBgIj30e7QFe9gK6QbY/bq8fN6OXSHTjDWDDfntVnl\nBA+YS5uG0xkdHiRQfIyFMvHpVlNtLBui1Y2hWp5PNNEtV2iN9x8Gz2wOkhIX\nQ573bmJf5YXUM+ablmq6xw7DiXB0Iy8F15YCQ6u050xWSi4vAieqQFKPKRPg\n+YninhDMeBFb99uvUaRleCK0JYqjt3RQmhDmeKqxkmsYqLLIMTYoHdWyh/gh\nToWXtOXkMP2gYI7IDhzfyCrPwzvbVhVaumIyM0f3P0o5kA4Jolo3B6rFv6sj\nriPCVcARgdBVeaZXg9y6N9AgOaUL0jG6mtvwu86JaTw/K1UTi9aMd8Klwjhf\nYjZ3FScDLc+GahUrMlLXwRa6sSHUkRDH7QWukj9ThFlx3NAUYGzBbFjotixV\noqyF\r\n=/s9A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICZAeuaz1A8DMMBCxrhV737LAiSUKTOwkuzdjnMmGNW+AiBO/0oJO2hFIZJvSeMY1Zg1M4U5SKOvG38BIM5oyWrXOA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.ddf05c42.0_1599141219723_0.25660585798700786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b889e6dc.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.b889e6dc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b889e6dc.0","@material/mwc-tab":"0.19.0-canary.b889e6dc.0","@material/mwc-tab-scroller":"0.19.0-canary.b889e6dc.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c47011345ccf89ec21a35053b80a0901ab1d6f3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c47011345ccf89ec21a35053b80a0901ab1d6f3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.b889e6dc.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-akQf5aQbRfWi24W9Zq007qYXbaDTxqFlBaOh8ypAaVPTyR+pYHqRo443HIKBcQyX6z4JuLo/MJouzJdioNlmow==","shasum":"5d8b91db9c41bac952b4b92f609ae41bc45385cf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.b889e6dc.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUPmpCRA9TVsSAnZWagAAatkP/iLywvGil5LBousbxB69\n53N2X0Itm3LEGpBy4EmjgEnEJPCCsleE6f0ZXlVQz/QXZX36YrmGcnLBh9ME\nDyM2aEduTEzQzgGGZ3NkNzzBAK/hzu3aNx/lMXHJ/Ct3EiVG9gYToRNsz3hz\neExXg0Z06eG4xYFsWUBzvZ0m196q+HHrsReujPuMKGv+Voqe+tc8LF0SFZBL\ngdURD51SeOFbH0Ad8zAM4dWeMIEgCqlJp2dy7WlfLgbpOlQrRKBDX2haPRrC\n5eN7g2PBxXNj6OgI7LNGkbO8iFvALCieGTW8qg/b8bVxYB0XOC2KnsxRhJ4v\nNujnkmnJtx5btAxnZWM0zoqH2yE/Arkh1u4uVd7otAijVlu+GxMIzwP2PVHe\nbq/6mnZb5XAOD55Rswexqdvl6crGGKQ8F+9nP4NFg8qly2jKt8QvnodV7qJd\nBi5SApgJzuX2VSFsrwYllKKcIHKGtpE/3rVCIEuUXVRRLTxlIlRrpCPnYMvc\n1hb4XoniPuLaBdYyD30B76KNZp7wIG1ocmgwtMWecwA+CS3QSoT1rz02ngEv\nEok84RSH0lgtA8q+xMTnJUxz0R1FHWmbmVsEVKco3RwOm9PyYkAYH7iksdOC\nXM6fXYd7oI0URsbMwMEdvA74aHM0IXEyp+vL8zYxM5oSstemkJ6/QyEOMyJH\nLtzf\r\n=blI/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB4u4hk3xy5PYPucopczYA+fZ7ts9WwLsvy0fWe4icEiAiEA8/TlQYY0ExpwfDtcpEt+r94/YdfgFBgrbuOX2l41AOE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.b889e6dc.0_1599142312680_0.6153366519734393"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.aabeceb0.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.aabeceb0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.aabeceb0.0","@material/mwc-tab":"0.19.0-canary.aabeceb0.0","@material/mwc-tab-scroller":"0.19.0-canary.aabeceb0.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f699717c41dd2fd6f77fc62da010cecb621e6991","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f699717c41dd2fd6f77fc62da010cecb621e6991/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.aabeceb0.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-bu7Qnk7pJCeR2XkdSVWiPQHFqBDDVAzSyqhEcThCrSDpZKZ455U9xPq68RjthJG1Q4Lx8NWqLcrjETZBV5CWMQ==","shasum":"c1e9b45e3e0cd0d76cb93f277e06df0a84d8c8d5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.aabeceb0.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUUrPCRA9TVsSAnZWagAAsbcQAJmyJaLSrGp6vJOZP0uu\n3nT4gKdzSH7xBv06UuBmNk46wjncD4gfI+XLrPi05JTGWBjEOluY51Kr09yY\nur6eNtlO6ZC/Gqh0JALRNOHVf0cwH7gdzRlVN655/UW403uLOUdET68JeSm2\n49Uq+Ya9u4ugq/xgrOoAZJQnEeNrsJVapxXVvsq4CVz6YC7IyxRe+yyZWDnd\nbqsJCxSy6OomNtV8gGBN/NfYNR21yxQpQjFQKNc3YTRMwvmiNlH/t8Qi5ade\nVMMGq3AGRLDpFOW5c+RWzVAm7na9fcxvw+jkHEQz1UQ+c8XctlZqGlx9h56L\ndQoxz9WkGaidEmwi/Fp81XZYE5ZUyx0fB1d0So28q3zgCtz+WbJkfqNln0/M\n7JlyGlvQbwa0DHrXRRX9+nxCNTSehpw7YXvnxd4AP9nJVzON8+2XcEJWjPXQ\nIRaEbbJS4low5JScK/TQbGzoDgOza3JqiVE3WJwJhZLwJcM8p2G9irWHa7Sb\nYSMe0D/HaPRxHLM6Sqrt/Jcu9tFdWj8UTQY6DQjSKVERclGo9k9+yScj9SLs\n9kJaCf/gK6GPU7YN8fxj7aSR1j6ezYd1UH6Np8zKKBtev7x+ezMmm2sN7ur1\nmQZ/mafht7/45bDLYtWKjICTV0dfiySEJ9inXYTtEUf7b5FguR70Qa4Y1QZF\n/2ey\r\n=j8q3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSuUgA0OZlc3MORd5Lhps6rxdotRFgo+FZ0hsYmGobhAIgdfF8oymD11t8LFJauNzmZwfKelEzVueN8+G61YPiLMY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.aabeceb0.0_1599163087001_0.7213043588132002"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.d8cca3a6.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.d8cca3a6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.d8cca3a6.0","@material/mwc-tab":"0.19.0-canary.d8cca3a6.0","@material/mwc-tab-scroller":"0.19.0-canary.d8cca3a6.0","@material/tab":"=8.0.0-canary.911014711.0","@material/tab-bar":"=8.0.0-canary.911014711.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"db99eec046a418490ab66f7fa667607aefc5b26c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/db99eec046a418490ab66f7fa667607aefc5b26c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.d8cca3a6.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-otx7Kj8PZG1QQJ2MNJvO49xVI7kC9iruyE2GdU/ZYJF143BiY9yilIqRH4KyZxLwQpySniczE2WPv50vyB2quQ==","shasum":"ee398443b0308d16c12a6674ba3ef9d97926adbd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.d8cca3a6.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWDVCRA9TVsSAnZWagAATEgQAI1I+JnACjq/wRpc4D4i\nNdYgu53x3PrXF5jNo7cxTJeav4EHXzJcl9407rJNIvlL9HwPcpT1xTERIRfm\nLAFaEwrjyv+ToAtA2r0TfkVJt4EA37r7OWFMeAAdFT7Boc8tp05Os2pcliMD\nWYyvbj28it5QOXJqbTL65gNSYUopOe8jqIpSe4ORUAtiNb/jn/XOpwBOUVrO\nMXwyT4klUhLNfrvZPjZcsHquLDX1KmjeO9YJ/sMzd31olGH/OgqXWlpU/UW/\nYTDTE1+54R3GC7YCkW4pKT8zYx+PM8h27773lB9otVHgMJAcH6Ie7QflcBxI\nzPWeaPT1Uj+Fd1GoOH4Yy4QaV4kAqKOgAcMwk8PEnj12wCgxRQtLHaonlsFf\n5O8KWMcfLlr4wzLubgtMjc7VULYp3ay++DaM7PuSvs2VFaQXkK6+yjg/y6Ml\nOg0pqgLsP0zhKTuDH7D3+6pPtB1iXToM1/GEZpZNUXyxCEnovWP9s7RA2QrN\nlkZUvPbwwZgBLVXf/rGfOeJ04boy6nqCHqL+IQZQggFznLc9oPPd44UW0+OI\nwp2uX0Ix81IL32ieAUILc2hBK+o4LD1+FzANONBkyiZL5VVrQJz329kopqqc\n3njHmcPl87vPkGDX/Nwr5wpBKlQD/vgVukOFejmmCG/5rrUBs7Mh7haARctY\nOUyo\r\n=ZM8k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHDBPhXBS6/TFeROSnoJZn7ePR3PiWDm3QPSMRaCi1zKAiB2bTMfqgeERVLT3fwFlGTGjjK8ZUWnpIWbaEDrO9LRTg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.d8cca3a6.0_1599168725282_0.6867201406470753"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.26d34b2e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.26d34b2e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.26d34b2e.0","@material/mwc-tab":"0.19.0-canary.26d34b2e.0","@material/mwc-tab-scroller":"0.19.0-canary.26d34b2e.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52bb6b8fb277d5ec6b66932a0683e4f2fdeac872","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52bb6b8fb277d5ec6b66932a0683e4f2fdeac872/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.26d34b2e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-vw7ZqRJvei7ekvBqgHW43Z8cpqtxC6IQ5vcZ3EY0xFgWte3a5fHOawlRA/YFuLr9ZPqM+sBOuGLIIFnSaPtDfg==","shasum":"2814f349b2be5422a953e79ff7624d7cd1a224a6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.26d34b2e.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUWbFCRA9TVsSAnZWagAAj+wP/2mqbaVVCgs6q2xlqg28\nXUffPNEeNciaDZBPmwEpL/4i2qs4xHfVRZqjx2uSveeAHsGOQ7D627WJl1KR\nCk/fpx8B9YCj/Fbu/8HjZHz6fKYe2B2VJ0rcTVp9RbeqEBfeve+IAEsZ4X68\nSzdViRXX3GFgkoMJkdBJtJ+GG+EFZ+iP+tziDDBubJWKK87E4J/DXkX9gKSn\nvcbXQDXsbqWpV9h5PhPSmZdqRLsb0BPh08tvM9vnlWf8h+0KtXBe7a2VCpSS\npBpTvpcEXLzUtBCDIDH30mLk7c3J1VRjEjRwZ/SmijYLFgk/LF2wvqTasvES\nHLkl7Nt8CJRMKX7FMTUNb/2tRhHDzZ2ORjorDyOFM4Xf1J8t1HNneV/83xbg\n1VdN5sUwy2L784QVrCXAOm2WLHViiULwjhh0z87VgPyy/96xIWE52GGjao6H\nEPJThM+QJAO20sru/OSKJDjuwPeo7xrEpC/ZqfgatnlrXbixmsqcJrj0y0Ro\nhZqIe6m1cMCSiQyNGsdnUrFIMwgVczAmOphbUq9bCGYTvUXlgZfikW/Tar6A\nzdIFLLjj1h2m5HUQewuTvDwKTQ2UHAgLJTfo8nb0xECiJsOUXMp3Rm5CD+Bd\nVvzINtR/rSskQ32TbhKiF8QD9toQwGdFYzwWN7OQI+l6iIhwNiEv8CG4x5bX\ndtIg\r\n=JuuG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGr535XBfdHxRiEzdfnBGDzk6QoZJFsohCWkKjvWhmRqAiA5YnAVikVq+1Q2w4BpQcET1+zyDTRyHI3F16E70B9NZg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.19.0-canary.26d34b2e.0_1599170245326_0.12584643872575074"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a1c44494.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.a1c44494.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a1c44494.0","@material/mwc-tab":"0.19.0-canary.a1c44494.0","@material/mwc-tab-scroller":"0.19.0-canary.a1c44494.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ee68077e51a883c9a0728019c33ed96d4563758b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ee68077e51a883c9a0728019c33ed96d4563758b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.a1c44494.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-uyhQqt8xzOaDsCbkqC43MFYZepfhUJtYPgHgPFOcOcpvHBt2INbSr2a7oLiEaz028B9ZJF69uUS7r4NtneVlZA==","shasum":"f509296478f3871cf559537532fbefbf28fb68bf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.a1c44494.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWVJMCRA9TVsSAnZWagAAPggP/0vTDP0xTR+XQoJEzvYh\nDdTAiJ3izD/D0KULXIkwbJgywsjQrjmZa4c0OCmClUcJ95u4lvw606Ik2WLB\npzvetPHUprkla8RMx/XeGO5Ct7lDRox++ZlESx/6hPWheh6MIpc7ohKdBaBh\nBmDpPgWNc4+i5/e5TduU7s6232fGEM/BdFzJiy8gtYm8x67zibYAu97I/bLk\n7G6X31VmC99hJQivs4IIq6aieNBBLuaEPKjsj6xQdy9pVba5660qVq2qq05/\n/7SFMFofXvUYlEVEX6I36d59NZRqyHw0ZAvYtexxVHuL/YlzLMSZ6kWNKQ9D\nUYMPjg4gqGbmbRLPp+UQrjNq8dOpvkdvraCkeoSCH5ouv2v/QVePslvzpDur\nAsWGQyHngZhctJtAe4emFkzRRYlgduwRjk45t7H2qW7E1aK9bmIuLTyc8rFp\n9dt6meYnRIAN+ZXBwd/mMuzylV2lf9P2MDFxXohmgChOXEAL1GB953XOv9/3\nevzENCTs3ytHrlQL+2/KDB3eGJcTZVi5iUVUZIDQw2SfYy/GrsMGEhXUGqBJ\n3+PwiYl25G873q0v1sAnz297klkpyYk+TdbBpBAW8sc8LJ/cx9GMNn8pR2po\n/6K1j3ae199swtsEyjhnO2NFiPe+IsYScDicwXSZf2QzN5oaAaaPS+FLejxq\n89as\r\n=cVLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICG/f3ScnwbJnyYOG4+m7sGQdk0Jxim4wciG/wdfo3ytAiEAoICLeYOWPpkCeswekcokZWAAX4iAu9tbM1WvWOujZDg="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.a1c44494.0_1599689292485_0.7849137750328001"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.be1cd1e9.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.be1cd1e9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.be1cd1e9.0","@material/mwc-tab":"0.19.0-canary.be1cd1e9.0","@material/mwc-tab-scroller":"0.19.0-canary.be1cd1e9.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e4ece959ee320d67e92b5c9add79f6f7eb4b2be4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e4ece959ee320d67e92b5c9add79f6f7eb4b2be4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.be1cd1e9.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-/h9/7Q0LCvpk8G/QDTJROUaV2FpP/kPK9FLZRn4vmyEKCt9tJRCKzvgcnn/3er3CBLUWG84h2GtlNvDw6J6UKA==","shasum":"c5cb037d79292e582ce3621234222cc787aac943","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.be1cd1e9.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWldCCRA9TVsSAnZWagAANO4P/i/cCwKSS6yTjRJwG1gN\n9UbflW1ijeYtI1P+mX6F9rHWlGbJ+d4w/W9affXGdcV9O6TlV5Cm7YlcHFsy\n2yS0YgVGpjQTdWHxVcpPSj2zSkBmIGuZqJo2gLEtiOwRc0pYenpCo0MfXJ1d\nWJrDjYi38PEEKNPeeXQZs1uLY+0bF6C1QYBpfgERbzFfFv/fZ5YvnzBd7yYb\nx3Imtva0PAKwdIy17SLDMxQkZST8/gRjoaVqXbHGP+3spP9BJ4K9wf2+M/uf\n0eS/723znTImq1zi9E6vxtwfxRoJYcNm2yrOCHek8UF400fI5pmbH2XkKom9\nynd8BI9z/NYyL85bdES9oetCYdrI+HC8qUkn5Ny78JG40QAzr6fIiIA6t9ct\n4gcbrIeD5vK4oStVOIyHdaSI3BtOwWO3IPXBkWLPeKMwUuIpebx959Lnic0n\nMtEnoEnXK1BJgvaNtYvCjvTk2jo231NZPAxjmdqYknCOW+ls1BLKnJXA3gzr\nn2i/YcrM34/ctY9CW1Jd+2B+y2uZ7SbOCTz4n1R5mTMYLm6IID/37TIhoaAV\nNueBKmYjNsMaKzljw+25xtHWl/dwfNeZe7JygIrnHEfHVLp0JLax6qhJw3MQ\nCUN5eF5wafPkkO32Xm7vE0J3XL5jCF2z/4r3y0TAigG7XLMducZZbkwORuyM\ne2Ht\r\n=PIs2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5rMdO7fHNJYos3HgQf45UwF7pklLYThbdFkLvzG7dLwIgMkbdFC7IvnRgVJgBSSkV9N1xQhTThZG3nAmGCoPYA50="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.be1cd1e9.0_1599756097684_0.6918605259543771"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.f094c0ce.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.f094c0ce.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.f094c0ce.0","@material/mwc-tab":"0.19.0-canary.f094c0ce.0","@material/mwc-tab-scroller":"0.19.0-canary.f094c0ce.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de510bf2f44db6ede47942c88abfee6266225354","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de510bf2f44db6ede47942c88abfee6266225354/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.f094c0ce.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-ODzbpJnf4EeUxXkNgiKPJSVNW47rEp6xLFoOIMQaYIw3pXKQApB9pWxU9S6zNxPUx64tuvTsrHVgbTQ6g1Dxhg==","shasum":"53a6bbb94a75332f413511330299be6a4f238632","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.f094c0ce.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWmQuCRA9TVsSAnZWagAAsCUP/05YfXoog9VCd+dKdKcv\nVGrh0yPGes7ZuiDvkknM4/9Ci6DHwvI0ezoBzAaK1VuLTbyYKJm03x2zjnqr\n8vxRPniOq38VNAblUF7VD7suJrCwyie8/ygeaRf8nla+1TXETbTbs02eVnpd\nJ9n+gau7aol9FaKCyC6jADeaZ7wSY68hdjSmsSemrSxaoaNhqL8aCw1ewTDB\nARUXE9GFpQoR/kWzc9Hdi5G0mK3W0hwGcRwNZAXaxVBmNByqBtGmMw7tjdGb\naEtEVciUE56KYNJEDu5Gy0B9gFF3m86GlYF9Xskc5wLrGUL97H8p5NpELwtx\n6mGXr3zxbsigI10tdU5NNe0XuLMMw1m6/gXE7cR1OWeVMG6hND27br1XtCxi\nTMafIjphqKdUNBqmzQ7ZpVT+48L4I080ePSkfm5ArUkUgEIvz9j76240klnU\naWgvIUs6pZGzu/gBIPFgz0/zLHvf7tBNAPrLzeCJtxLgfLxGTdx2FuQIBktH\npuR/kLwl/Y2ZB4zEaAGofBqarfknYY4KIv+UtRggMiJkKLA5iQFGm0vePg26\nQ8dsLwS5X5K8CBkKT7+x3Jz6vk3Qg/49mQ22SghRCydhQ4y2DhTJZjozoxAP\nRmrQGfDTH1Soc4RHESXtPBzK2AAm6koeHoq0tU6Zq6J5M2OlY69yL41OFgLf\nx7uU\r\n=CyxJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAduCZlUeUVdcsv6YMjuuCKbRRO9x6Su1hcpJgrgS+3FAiA12A28lhulyMQ/fXohUod1C9aVrGW9yuTS7VyFImwyIQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.f094c0ce.0_1599759406225_0.24578123197226276"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.c1261e7d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.c1261e7d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.c1261e7d.0","@material/mwc-tab":"0.19.0-canary.c1261e7d.0","@material/mwc-tab-scroller":"0.19.0-canary.c1261e7d.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d3ed845121c57e24ccb397b137eccd91a179c1d5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d3ed845121c57e24ccb397b137eccd91a179c1d5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.c1261e7d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-Vev0BkvPFnNoa+XhfGz4dT0GPsaUDABXJb5Xg4V3OMtbeI8TqzHissnwBigT78GBacbpjbVBxQ2jcb2iV9EfCQ==","shasum":"830b402f18bc58888a4a61877684223e565e9e42","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.c1261e7d.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuBzCRA9TVsSAnZWagAAyesP/2YacAzhtHETPnZeNSfs\nPwgbvPmsYrAwMpia7rX6oAuRNR/6R3MJLl45ejo0g4N++EOReJJns/RYnVcB\nruSVXYhOn7RcOzQ4tazelegKd2YS0MVFOKmNzdQQ0uOI5l0Cx4k2rTQVZWpk\n6cXxw4jRcwBIEdda82iNMXHl/kSPqqgXXqNdKWPQ31NDPx4tZstX3nWpxU8X\n68BQlvneVuLW3lGJR193XNZlPSS7aXufrWN6DKzkrrEQR+SC7ICilplWr3Mt\ndRBTVOvYkGwt3UyEtGm4nFNRA2ycVZ+qX/aND6zrt+vBQuRu9FsAEQP/3lvs\nffVMMiWNmSUbPz8J1jP62yNJj1mZbIHFqCRQhj95x/28c+RpdKNlH5q6Q1Uz\nmMRH0TSlHw62m9r1/7fbgLMHZFyquxlDFIKTIbNnV/tORW9+W6DeKfA1/KV9\nMu4MqbgtlW2MX1fiX7Qxn4zJ9tEEWVPOmrAJ1GIaLcYhcFEZsZq1dEBY3xcO\nnLjmNxb6Z+lMS+1EwPXiNcYLqJqZN33fy5zaI89nVLn8oUGqMiw4HBCVVZgW\n9rDIVRU0IU+gJ60BrSahtELp2fyXc99DLw2OSD4MGC+dD8T5p55Z7KB+15ax\nivIZ/cPQ4tCilRI5Yvo/qmx8qnMQeD0IRaymLO1rluB0NKfX76pI0WtOPb2+\nWkym\r\n=15JN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAbuIDhZkTwE3T6/fhCx6woUvDdLvszNINR2wNmQTFuIAiBd0J/RpAX4RMq+XoK5M/gM/PWi1bdZUWAWGuurpEcz6w=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.c1261e7d.0_1599791219084_0.42173367942297113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9b39ed1e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9b39ed1e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9b39ed1e.0","@material/mwc-tab":"0.19.0-canary.9b39ed1e.0","@material/mwc-tab-scroller":"0.19.0-canary.9b39ed1e.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8fdf88b38d36782496195681d3b1d340ae36fe12","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fdf88b38d36782496195681d3b1d340ae36fe12/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.9b39ed1e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-fMNa4bmtUgOlld4Q4hNDJiQD/SaEKvvi+CTkGQuYUr6nYRDMI8dvTTiu6Uoy6pmgMu9h4peHYkqv0uPzKpfDtQ==","shasum":"cc79f95a94e3375e9bd57b7716a8d35f093569e6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9b39ed1e.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuCnCRA9TVsSAnZWagAAEMsP/icrHzfS7eSeFRwUeoi+\nmLjjJ7NYCHdjoWitMNt5OoUQr/XIu2dORuu4qwq9T1x7Ftd/ZuLsCvWqXNUW\n4+4TKLdFvNRaWzhpyDmxpCYIQ2JVlENmPg5ZrQ7TTp3igQjoMReJ58NDNIIi\naS6GRZwa22Lu6Efa1nSdrdL2I2T2ZyANcC1xQBWLO2fhQXUjyKeLmN96XjhN\n0DzAmqJO4HSzlKAe38XVpJVV6VtJfjvuwcK00ZsuMsASS6vt38Qok/xEv+tB\niPKwICT1UJInFQCXH/sKR1zTzhp+UjYvpoAnKfNe6m7jAKhxSWqx7huXd86v\nHb0uDb2HWJ1BaRWcAXoca3tUrvKqxGPvQVQI6CNlL5hvnaHqH7Ok46c5YDEZ\nbqFIL/iWA6C4Uo+tEwNjm9H8ZxNxcbZ3ULXW45LmJ/ZNp65bo/JpzsV7TGcg\nDrwzOdQ1zE8GIMMWBRMGtnzcqo47qF2f4k+x6kZ6XApyUQCqsryHvnNk3y6A\n0MiC1/HvxKibEjzGe4wMa4RBZhU+785sm9SpgG09MA/k0poqu5XKN3oggKbc\nY8Yo9IX4/vcC/EigOlGDSXY+SocgP69Ow2YM3IKWPlo0eHIMxCU3X4VvJAbC\nHEAQB0SEX5Su59VN2eraYnKi2BFtVTCmZrQpkYnzgAatSxbgz+HF+iK+wQvl\n+hvj\r\n=z4x+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3UbtM4H5f9ttzHae6dfABxs2rrzMCAAnqy6OTIb04BAIhAJLEuPdpZq7l5skprZvoYcwV7WHQfPq3HITqY/dqmm3n"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.9b39ed1e.0_1599791270834_0.7874277995078962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.e67214b3.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.e67214b3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.e67214b3.0","@material/mwc-tab":"0.19.0-canary.e67214b3.0","@material/mwc-tab-scroller":"0.19.0-canary.e67214b3.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9d09adcdde4c822614f34fd4c8fbf1e1b07e558a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9d09adcdde4c822614f34fd4c8fbf1e1b07e558a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.e67214b3.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-MV0tCpuELwUitNZT/327ynePSqx7Unqc4v4G/WL9Pljyeo2+U/GrcFXjEU3bqgY4F9+uqT6Sh8PDsdlGaaSU2g==","shasum":"40be53a54ddbb1a1daeaf807d48e52e99e27880c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.e67214b3.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuGoCRA9TVsSAnZWagAA6CsP/j0QV2N4MKr9DeDnHBLT\nivvdRxORJCpBLWCJ4Wb2cn6oQ9J3eDy/WZ8YybPDvzTOBTzwYZI81hZ8KvPU\nGAcj44M178/xAZmXPM+Zsm79VLv8TzFpBBQm9L8mTK6Hl4LD6xCjIrB5TtV6\neIVSUGBAOs7ekUVJkdOQ15MM2qi/Aqd5N8KaXaDNwHhxq7rE0RDfnw0dqW85\n2yv+e1k/BXJQrn/S4iFq230+QbDi24/cBpPuYdztW8nevvhTRMtQxmSRnUNp\najnrZNd9wV4XNmEdm6YWuKQVKo+bD1/eDOn+VUi3VK6/c6zjdMUQcXax8a2P\n1MdvtpUhJ2s+cGz/ao8xskZi/pZsHjEBSGw6wWfDlghxA/cfAaxjds+oCQSB\nkat4tRbLpU3kRuVX6ETzLdLtSySplUCu/Y95dF1o9ecE8yaTBl5coCpfI9sj\n7O8M/F/yHrM/yjNERDpNkiJ7+OMAhoxr/Gt4fMJCwA+r+I02kqmeARbO1HT6\n9jxPdXaoiZHk9PH74Ah1vf6bTz0ATx6xPJdI/YaPFgja2aDX5nM3kAFpP9EF\njx9uEwyJhg2a/RcJ6QfZAjR1wpZvsfR2HbVfBRYXLwFJNw0aeTnnLB/ghrpR\niZ2YPOZ6Koho2tHZMWzsGGRe4ofEosKO/RkIESTgpFBZYS40TsCiZ7g/Hm2A\nYVVc\r\n=bUPg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB8wMYxqMR7hfqPCpEtjkab3DtdkP0m5Xprsx7zhfgOqAiB56Ns4cfvUlS4xLa17RgrJoGAJuM9EocfaLpcwMc7n7Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.e67214b3.0_1599791528274_0.640748842612973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.36f5da28.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.36f5da28.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.36f5da28.0","@material/mwc-tab":"0.19.0-canary.36f5da28.0","@material/mwc-tab-scroller":"0.19.0-canary.36f5da28.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb828fe61bd1e331e8d6f63a24f6e78d58858a93","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb828fe61bd1e331e8d6f63a24f6e78d58858a93/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.36f5da28.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-yy1T9POl+JldKwzevNZdS4N7XqQ67qjltmAZqJm+/dcoAFIMPHmUZu6i/dk/qZ1mNnzVhSay7UpUslIUaFIIPA==","shasum":"6f21f5bb6c357d96957d27e3113382a7b0278f34","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.36f5da28.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuJHCRA9TVsSAnZWagAA8gkP/2hxS2bPsYtXhO7IKL0j\nuAGmUmllp7pN0CsayhtsYPQ5VQ/fWlaEdZmNFv6nXPeFd5qHIiIFKBRNwQ0F\nA/f/JY10IzXcqhdq4iQatXGV1NHs6dwRAFRS2eUm0YWB95oZ2JJOrCqsNIrk\nENfpaZMPmEcIjau8lSjuslb7zzj4zEpCnufI5csnGLCNbSKNn07j7o9wP0Tm\nFjs9h3tVU2kSLfIA+b9c3hfSU26S1TcuBMWuv3Sy57zIagWSL1y8N2nQemoZ\n4WnZrj8bmPGnjR7mbPCGtXxYz8sm8CfDk4iW/RdCl/8yGZG7EKoFm2N53gyN\nXT1KdvQs/UT5edG8+ql5KSny5Lcv0m7ETGyWkYlsZsl/IWW/ZIWY0Tg56u8p\niwfWKtMrp5YVva082CdtLczhklCclHqOHV0NZzUdXRAy0/BpDswNP2pNBbkY\nGaDtvmBUxYbyfNdW4MkqYOqN78VDbnXQuRwjGJ7sBdamCrZHTgF57rwzwPaf\nIfH6fW3M2spzFs3iyCYlNrEcAuEjIjNL6BApvax6M2US9Ier9qs1F1d5AusX\nWfiZQzBLtV9fzmi3XgX0CF32vMenAzNkHa0/Wb6ydOMlBWDz9Ue65esS/tfH\nhdopP0kj3bq8f0NUIUi3v/u04GiKl7OlhT+1nQmGHdT4wAXDfdbxtATXKwFv\n1Ayn\r\n=SEAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqtUSKCrF4p8FB1q/WxfC3UDTWXmMCG+frDFiZUcMC3AiEA52r+taJfWmtWwwjpp3bfLymHAsEz4Q8TX2TOxSeBJnI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.36f5da28.0_1599791687102_0.9551531034171097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3babab12.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.3babab12.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3babab12.0","@material/mwc-tab":"0.19.0-canary.3babab12.0","@material/mwc-tab-scroller":"0.19.0-canary.3babab12.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3c0abab82c4079d265dbe68e3b3ce3dcac8519b4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c0abab82c4079d265dbe68e3b3ce3dcac8519b4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.3babab12.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-N4K91Fe0/8DQjS3yfN/mAiMujME8bl42Wflz6lZ7MXR0pWXevFTnaSYrUkuyehl8c8iWiRYDavaWS2Um9bnRsw==","shasum":"b8e9317afe220fe3c2371d83b38ddcb0568078a6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.3babab12.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuMFCRA9TVsSAnZWagAAd5oP/jG+aGLbRdTrSqusXIxd\norPsqbJafHE+PPYgu+3w4K1ykp874edXftIDp8Dhf5tqGBkiA3IDXsaxA6zo\nN4sL4LITI5U6nPnzZQoBZZOTiaIzdRLilUeUNsmVvXereu1mpwkkikpEAPzW\n4Mt4JKzj/j/LHZv/3Ac2E7eeJjoyQP8hRt8xvsnxHkWs06KFrCkgZC8DJKhl\nujiHJPV0BUZ1LdPM7kDKwrD1yee4fDgHq04hd5TQIEGkkRTZU5KeuQBbLdvL\nWrzrIwSRzqMfO9yvr6fEjswvXGmb9s2dxK6rGN7SaE0V+4m0tBNRmGYdWevt\nzYxZREnSTNHaLltx6bwP7NesoXdoFr/BPHoyAZtZoZ5f9cOWKr7PjoerAKBd\nMMyqWpLONUHjhtOOiCQlHMjJV1EeL8tdyaguQvXAXxYoobvOrIeqFISNsEc4\nhrzLng8opuBWwVSWifmZXHpY+V3E0OtxNfpXmwZ3BxvbyMlxtkBZrjYJTBmO\npTIj+N8DhMX5Hnwclaf6egrGFIy0X9OAFsmT0ND7sjX9av/jAMs8hVe4SyNd\n0kS3AYDd8ppwkOyqbHhFgdBpFfdG4c+ZpgNdR7j6HHKrQIdUQwjpY9iHPrMb\nDIPu2G8eBVGhgm9M6C2iaGweIh06m+H+8R/xdZOCjaY+P2/0IMd2g6yJ0w+E\ntzJv\r\n=sUbt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpteRzvS3QgOVWBjrEF8P1C/34mGXdR+mlAb1tLL2TjQIgWPfClfFK9TNVXwqBZL4IN6HfyLjDeOZ6/l4ltatf/P0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.3babab12.0_1599791877028_0.3357483030736488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a4481e6f.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.a4481e6f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a4481e6f.0","@material/mwc-tab":"0.19.0-canary.a4481e6f.0","@material/mwc-tab-scroller":"0.19.0-canary.a4481e6f.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"de37747ea53bd97e6674642d17f239407a14ba71","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/de37747ea53bd97e6674642d17f239407a14ba71/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.a4481e6f.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-XLqBmTVzMHW1SHWjHgDOXOSyLwE93F1Irkf68eMEcDMo0fsmXpZHc/qsXkc+v1cGwMgX8TUH7WEQlqtqBEpwMA==","shasum":"194ba3c7b4c8120c02b4d6529de69a2e63107aac","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.a4481e6f.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWuXTCRA9TVsSAnZWagAAA9sP/R3opbq5AvAKuiOU6zap\nNBXPyWGtgWo5D1JWjLk8qMBJ1Oj32j4sw3gGe3tKdrRR2+X2FdC0zS9B8S2s\nljV9zLP1w9/zIF5gfuZ6AQlpM2/VkGG5LKVeBLDhI1eCikGJs+7lK+w63484\nSJd863klSqK0Mtj+Q70qfVFwAs77Cq/Nqor4GPZJIcXVCtds11xliQ94+opT\nxupSGboTnewSyASh6O3mylByW1O8TwYTEQjEOnXI6ih6TrYExUpSgZc4Rl+X\nnx3si7e6PJDNNWIaKsIeT0iiSUDWwEos/9I/kIfL9eeyCEBPgSE88QywyW36\nE2pBvyWOsYthmME15+nO8JGbqxMvb4fSEGMUAUMIicxPoMTIxJJaP9nm+dcb\nIzkOQbFDO9fBOoGC1mz4rx9czB5+iOZzG0f4YMCGipizexDaExxmghjV5na7\nsVSf67iRVo6jVsSf7JntceeD1VffX5Cm4fHVHBgf6qGWJfitH1gyEouaQ4P/\nIGT/J5kd6cr4FcstI94XiM1AuEt/emVzv/KLmP34SmiuYTrXWGGQR3jFD4k4\nwvacXSXGWTv9sWAuDKkTy2FEEO8K5xNVNmbQ4Vz7aWE4E/roQdTX4Ppg5AOH\nnn/GcZxovWG26YmRWl0jbFn8u3hg+TNyB01iS5vxibVj9ju7m9kgSZytcMYa\nW2mp\r\n=Slvd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAboWGF1Olz6rhdaQwBQtvrozSFwFq9x3Kk7ungu8PnMAiEA4OsSTP0w/MVFrKpOfayZH08JMiBiY77wwQmQC6unmRU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.a4481e6f.0_1599792595260_0.7548391334857452"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a9177836.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.a9177836.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a9177836.0","@material/mwc-tab":"0.19.0-canary.a9177836.0","@material/mwc-tab-scroller":"0.19.0-canary.a9177836.0","@material/tab":"=8.0.0-canary.744bfe5d8.0","@material/tab-bar":"=8.0.0-canary.744bfe5d8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"172468b3d6a388a8fa5360f5754a4a7dec5b878e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/172468b3d6a388a8fa5360f5754a4a7dec5b878e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.a9177836.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rLaUkmASFKHNv7GhecHjmp/R9Vaa+z2iTp0jRtyDlt4Uo3y9DnnNTEy/HiA7erkq+qGwj8UyNZOXICP29lTMTA==","shasum":"34e96628a129ed649e7caccb934b68fbc1bcc586","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.a9177836.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7hVCRA9TVsSAnZWagAAcTIP+wTDrraXlloD6QVrEsOg\nvRViVaAG+lOVLiWfkLPBdU5qgkFtSr/wJzGgruJMaqimfUHShn0ZveDbrFMr\n7RMhfqMkg59RM9zKjWjwT73hGKxXruoqa2MbA62OBgGSI3K7SZJ+HX2SP+eX\n+1Cj9cMSnE2nnLuusZBWKlxqICuj320lVRi00fJAakjC7OnHXz6uwegJyyY/\nwKiCId1p87TwE0EvC1v+62qGblcDcgwwCQmI/MKe/1XWNCl6AgecneERtwlT\nhtD+KznG8aFE8J4XLPp8xsuHQx2lTvNHMMlh+RhMQTnyl5wNU1rj3ARXVuq4\nHBC3SQfZ0J4lkWKxIMLY30vAMxkCpWNLblsvH/s1Aojej2DiHTVWNbvyEUHT\nZ7i39ORozQBJJGQN7V0+Nnjl9/kzkgH3zXgm7rp4RqyO4dHizkmyibsELNde\nrhSqwzaKDGSeOFIkO3Uw2pscH50Lzdte4LQ7hxWTzbvTZICvSgqTq5GeC1kZ\niYIJyJZSJV0V5lvEiESbITmzg9NFWW+Gb86OLxLC7a7opJcwZNO9UZ489VQt\nw+DZT280LB0LqU/zsWhQGstmZXEJO7xZqBiN4jVUkAy3D3yL4+ERGN1hdEBg\nWuft/Gh11vKaWWIRhAa3XvQ5VF/jShVOrGIpv3XTfb4WXev/63o2Qvvbs4Ij\nhXoQ\r\n=IVEW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETanYIB4HsxVIqnwYMtzVouI2L9vZNt3URXpKtt06gUAiEA+Q0w4buQCbN5Tw9pY++PMaeuNi/h09G+irRtW0Z64qo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.a9177836.0_1599846485424_0.8140128462825678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b102a3c8.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.b102a3c8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b102a3c8.0","@material/mwc-tab":"0.19.0-canary.b102a3c8.0","@material/mwc-tab-scroller":"0.19.0-canary.b102a3c8.0","@material/tab":"=8.0.0-canary.319bf66de.0","@material/tab-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6e9858879b6405bc690bd677e308d5197c609741","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6e9858879b6405bc690bd677e308d5197c609741/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.b102a3c8.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-pTeS5D9m8VjFe646oxWnMxnaM9RkSHf4R+OGlfmpnt0ByrzK1k/FIcWaT08TndFjI4PLeNXSpsqUju+J8zq8mQ==","shasum":"4b20f167a826824bffd175c8152be594e70c2222","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.b102a3c8.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfX87/CRA9TVsSAnZWagAAwIAP/0WUqa0iHcdRQlkccbwp\n+4cuUVE//iMNDDuSFs78VXl4Lcilk75vW98dwueBmBp3R7snDfmTwLvPO1M0\nneopv24V5ihCxF2poDg4SQA1JT8KgYNgn+LpbWAp1PeGPjkeRYHnySkDnAQ/\nIqzqYfs7ssUJIBuW/hRZ/CrUxqxxD5rg+Ymv7UWuiykv3AqobcxbkLhA/Lqf\nkCAutw4eVrUiv5p5lIgtl3AKcA807uPFU2zxWyPX5zKuhzHCkYICqzkcSdy/\nAoyubkzijDse7S0DlifS3p9eAo+1knpK/cuJnmUQWsphSXScpaq+fzVTRVjD\nSnEMIITwNraNCLbP0ImbTqdmpRk0h0dKkeF66cWsD9RSAT5orCwNPqdzzwl7\n9g3Go8BQmFwsbH3rYhk3Br/B18BiheWLG/nLiyjUIJVa24V1FR7LK3wMajGA\nECKE+xB1S83qe+zh9Eu+8Esjct4cdsqCJExLOfySlCoUua9fYRSBTiOGj+MU\nUkzwSNAxfGJICSDJQ+Ln9d9drYbdGq70/lzoE1qPjkAP6AMErvh36FFm9Z5b\nrvfPCvWXitE5eRhW0Y5XQzlrnAhu/XKhM7/CgEPS6NP0FMtqoQIxpZb8XoHN\nfI4vptmrpNzqPmSyxSkuu0iApI7GbelKke2dxu2De8gO23EbvSsv7mnzRv3Y\nFhfb\r\n=QUWY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/x+F1871IGibP9kDl1MyZJUHKFRNQ7iT59SFf3o64qAIhAKFAMbtoT31+2f8qVf5ZFuCSFmXmQJHZ1L9Vt5MnIqfv"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.b102a3c8.0_1600114431271_0.3630450501426845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a7fbc707.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.a7fbc707.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a7fbc707.0","@material/mwc-tab":"0.19.0-canary.a7fbc707.0","@material/mwc-tab-scroller":"0.19.0-canary.a7fbc707.0","@material/tab":"=8.0.0-canary.319bf66de.0","@material/tab-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02e804c299cde57ab03b33a403a43803fa9868dc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02e804c299cde57ab03b33a403a43803fa9868dc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.a7fbc707.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-6+VvZrE0TbbeOZ/FHhGLi5bjxLHyImXHUvI+R9aA7DkAIOcMHel0u/KsQ8p2ixxa+7pt7iICHmc9kY/70MdD2w==","shasum":"23bfc86ce6aecc1606243ab2f22e11fad1e666cf","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.a7fbc707.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYOZ9CRA9TVsSAnZWagAAqEAQAIhdrw78R8bbUc3lb/BQ\nSntV4N9bmpsRU1UnI44a9uY/2hdF7PfmGUPsCnPVCR+q2IjldUbi2IxEMnR/\nQttOEESI14ZbH2gcW8LiASEMxf4yKai1nbiiPRq2LsFn5RAY5UqPwrrvndM3\npbiiXLE8rZNjG974ki9VAXtyR25XLrfXhtV8+FC16IbLP9jMXJMImIiikb7P\nWYIZ8RbqlWjKU3l+WpBeTTFp32O6W4bJqPZuLudwJnXqx07Xoj0AKO9/Kiq/\n+TDuzwI2Of/1fCYZLhzd62/x02/Q8TViJLfvN4K99rD5NqSCO5QKHeXBh8h3\nJbW+j0YPtaeQAJ11SUY77X2/0kzA3CAYtenIh/DSHyawJkYvtCdCTopNv8zw\njK9wvbIcJA/Rx2+BbRf9RScmvTiVq/OgfbgPQhQGMn+NaQAw3RoI/DT4sug7\nb3PDIvi5v1yWRfg0ZVDXuq8uTbk8aPsMj1yWkguK3u6/9U/bnY4vxtt56kPu\nk01j1Kvx/7Ht52xKL8SN973S7LdqTMt2t3zIAqA2oarwv29pkV9Jq8wkyEjJ\ndxH8itNv7Zqqt67XqwYlTmY+tYJbbydyDe4UZlokE2taHRrr5a/w5Um9TtPj\nWePYFHcWU0brhVhw9bTpBXREQA6yIN8m9CHbxH+W5zUJIo5eTVRnI6R4c2K4\nUNxr\r\n=XeSX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHGaCqFdGrfy7BjrvaeGVo4+v6n2TUXMhOMfIa/r8GXQAiEAgwPShNR32pT1KsjiPATLJF8FHj7PsufdD2x2dcoD2TM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.a7fbc707.0_1600185980687_0.11639790919877768"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.ed6b8660.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.ed6b8660.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.ed6b8660.0","@material/mwc-tab":"0.19.0-canary.ed6b8660.0","@material/mwc-tab-scroller":"0.19.0-canary.ed6b8660.0","@material/tab":"=8.0.0-canary.319bf66de.0","@material/tab-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1367f8f205fb56c27d6146b261ef87d62751f903","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1367f8f205fb56c27d6146b261ef87d62751f903/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.ed6b8660.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-rAzZW7vqYuBegeEPtsSnb6K/V1pERMX6fjRoIqgRHw8eH7WpghzYwaxLt1BcdF/MA5FK/WsH/prAXuloTL6u7g==","shasum":"0c40f703587ce6d7a8e802c6b9faf4a9f5cf4aa8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.ed6b8660.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYPkDCRA9TVsSAnZWagAAeI0P/iPvqmXA7QkzU0coUol2\nUKG+A19MIqOuRd0lJGCqSpgsV6cTqbgTveVODt12UdPP8aW7WR5JjiY66nUD\nhwtiCfRxyyjJFsIRAJ713+OBOrmm8S7ZtKaw0aqOJl7gZWLC6XsApDnYNc38\nAMlaihVtrpiAYJnyrYi26aTSqgcEAduNiOjHIGsshXXGvPpu07M/C6e+ZkWf\n9/XBD7z+Agzt5skTqGgOMbdawK9pGunur7cLMc7YwmQHQafbKiYetn3tJ5C5\nhaBgxjbdLgxB3R0t9o8ab/7TTvqd4dvDIRHcDVsCg1lYyR0oSjv6ZN5UNwQ0\nNt7MjbCTkRV4hHhxrSON38DCeogCt89RcsDPiQmmnWrTo8GkcuklbTqog/ni\nk//68BoirS9673+sxAO3JHIe4Lhc9miXvGr+ozABsxLwQaSdICiLMV04LrA+\nX5tNBLPNGEDkhEfdmrKkLdw+B3LQIhAJ5bUoQxdlGPnnwBMPY4Iw7FkroyBs\nYuKhixoEOeHUPK0Pm0fwE8Y8lbxy7hej/yS/LJfevAd8ek7jrf2L58rthuC2\nzJsFKfFR2rAal5MxKApNZZxhEjquFKyERrEtD68zqoR/07QwCDXqwlUOZNBG\nmzahzSjz5ubkG/TKti8ukZvRapkK6GIYxZ79tbD3YtAAqpFazbvFnIwTpF7A\nbAJ4\r\n=tiRt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECCP4gfeEcI+7RGA9uyy+2nwNsWYXJENRJul2LLRxWhAiEAikXOJTFad5hl0S5WiJ0jOZWmUznvR8sRKF8nXF23CZE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.ed6b8660.0_1600190723373_0.6379176847245096"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9c2331f5.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9c2331f5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9c2331f5.0","@material/mwc-tab":"0.19.0-canary.9c2331f5.0","@material/mwc-tab-scroller":"0.19.0-canary.9c2331f5.0","@material/tab":"=8.0.0-canary.319bf66de.0","@material/tab-bar":"=8.0.0-canary.319bf66de.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59f9c402cf61ed25b9563e2c228a24b4fb13e1cd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59f9c402cf61ed25b9563e2c228a24b4fb13e1cd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.9c2331f5.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-2kQRrMbYvlm1wR8IgriEfF89RAOnpdCy7Qnr8N67tEFgamtg0ei68NvFC9DUGXVcIBw2lhU2zXjTZf4DJliMvw==","shasum":"db10dbb7faaf8b786a04271c79344b2eede9391e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9c2331f5.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP7CCRA9TVsSAnZWagAAj3QQAJW7dhUuCrxUd8u82OUv\neT03Eg7zZOcXK2TMDIa26BlPB0+HZXKXGdqNX57Nx3Z8Si37uFRXYdHUe4Zu\nsl/PuPNAICblV/74AWfBplA/gQSHRk7eE16h1i2deZxaoednSAk1inWV8YmG\nGMWrziIPDNOzRKsR4qwV6DAp0fRuxgYNP7btXDoYKBDWRnlEvs3J3owEL9sp\n0VrGOn/n2Vko17NBxaany/B/P7a09aB0dRD/IKUwnzIgYP+6JZefzCNClB4C\nZd+isgUSHHEaFFOnP6y0mMYoyifPue0m3k3IzDWr+7QzASWaQNipsJ5lKhpg\ntHYuNF7r7wQ3Bn9wvHGxWKJCdYT2c7C0iFpnpv732Ufe591edcdmVi80OcV1\n8sCEsv5sHxO49iuUHiYR2j022KP6Yf8aW3hOEcdk1RM9FwGc8rd/VNqXqOos\n02bTRPT8bun5MmHIrLs4NoGSMtttuUGSVwmpGVEEbvEpCDdOaTBLh4HftjYF\nqW1UxRMB4lDiTEk81P6nzDAqBw7vpeVKeYashcK9K20lqX7tzT22MuvqjzpU\nM7CzrS+kpG9fFQwEmngUC39QGYFxLeNXjbRbLSEVAFfDXy9S4clIs3rapdMR\nvNI8rYn3P5d/v3cdu4a6A704C7iItINjs2y5AI+KlmCk+FnKhyQsiZRTj3Uc\nSZBS\r\n=NgHp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIARTsI0H451Ia2nN0/mzLSgG4MXLUtkRMP0jaI7Rkg0lAiEAjq7AOPHp2aO8PuEx7wUM0CZL6JG81C8H0RWDuzyqfuU="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.9c2331f5.0_1600192193842_0.7412179693991707"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.63a5f088.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.63a5f088.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.63a5f088.0","@material/mwc-tab":"0.19.0-canary.63a5f088.0","@material/mwc-tab-scroller":"0.19.0-canary.63a5f088.0","@material/tab":"=8.0.0-canary.a831d4799.0","@material/tab-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e26f8baf20e7e3a7056a6b95b14cbd94c380a1a3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.63a5f088.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-cDkV96VceSodOlFzeUl0YegWjzH/YrYVn9x9hk50KU5mzkfjTfxJCyrF9epVrFGs2NrS26aeLBQ1LnmGUERpug==","shasum":"0be08ee7c221572ab9686c8e2da5707bef29514f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.63a5f088.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYoXYCRA9TVsSAnZWagAAtfoP/04VIdRHh1Dgl622YDgO\nDUYw0XzYcFMTIquSI70563eKiJ9IUBGId/30kOCpd2FfSzgPgUfKsgX9nqt9\nDsOInvmhmzCMR9dqBdoqNqeCyrRapTIrIKh2HhxVQPJUtcQfmG+tKE6dIAnq\nytorTI7ncf9PxhqTvigxwAYXZUqpagsaPKsPIm5AMBI3Tv6TY9FmObnIG+bw\nazWFgC/ooLB8WV5jQYHYmz5wOgRupByT9cTfWwGfX2dPnTSE4kWL6n9yL8/O\nR2byRkfTgZLTOY5BEq1s11FDf7gx/BQZnjAb+dx4bDlls1WUe5IbZIRX1zdr\nKpRhl9F6ynfomMi6lLYex5uE/aHbUqfaCIF4AwAJkAdXH6B60Mj8QAtE8O12\nuf5wm13U0v8s+j24ObNu54sHm/KKNAXpER9f4BOFpBvdxB2EOAuigkUWZnTB\nHPXrR39HwtJw+bAgWuoj0wIsuWBX4MInLm7PCBRIVxYZ8Aze5/FuVz7m6qmK\nVdXDt8WEws3NQAM22j2Wo0/0aAExEnuW3j5CJlSOOEfywzfnEMZ72CTZgAbj\nE3GqoBtaMlaFxtU83n83MRuw7g6HvPzdlSZCMH7LyQQtu5W/Or61igXohco4\njA7ZmYv2NS/w3dHhGUg7pVF7LOmQHtM2nrp8qT4byRZ11eXsLg5sNGzwUMYY\nbo6L\r\n=Hwzc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICxD6vBNCAjiYVfIkSJLDt3TzV5xdpHicTt7A1qd82xUAiBXBr2x/cKivWHViqEO2fXmIFdJYDlO6lwMsQm37/U0Iw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.63a5f088.0_1600292312190_0.4162605851290817"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.b7995e49.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.b7995e49.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.b7995e49.0","@material/mwc-tab":"0.19.0-canary.b7995e49.0","@material/mwc-tab-scroller":"0.19.0-canary.b7995e49.0","@material/tab":"=8.0.0-canary.a831d4799.0","@material/tab-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"18f169aac3491f89184c2463a837b86dba845e82","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18f169aac3491f89184c2463a837b86dba845e82/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.b7995e49.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-DKJsMQOAU3PXlw41ixEPELD7mUCZRQo4qEOOhio95xvdE+U5McWtMMvEYvsEhki1yUru0hQlRmK1yN+AVngoSw==","shasum":"fbc13b8dd0770c9d26f4f73c0ed0b8d5999b5430","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.b7995e49.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYp9OCRA9TVsSAnZWagAA3/kP/AoF5zAbvJp4QiJdTEeD\nqlluLVtdu4MVWx6PcdFCeVXN0AD7UXfZsVscK9XRxyw9Umak3Fty5BdzFjRH\n5AY2uT7x2geHPuu3tQKheb+A3Rr8tOayeNDc2HqTNhLS13HR42wKcyUpKSbR\niA95huN4iKs/4VPip6J3jvAZtYMpI3HdHc+PKDP4+Zgeap7wABy7uOyWqWl7\nxaODK2zCAUrA0ovo61j7WIop+GpyFpb7L/NhgNv+HPL5grXoDFZwdf4JgjMX\nWCtHGxhvr8o2GSPSkZM/Kop49yEwRZLHqIarX3z7ijG7sgBRIfZAIA2Yid0l\nYooihal1UI2FooOFf1hkaTEJY3BOIt6FUh5ovt7FDy1M0rxdSLYD+Iz7CrRu\nXi4um/20SAazz920AjgJukGSk18RvGRMkGT/98X6KHFcZsemF5zGriNfw/T+\nfIZZ+SuGuXkM9osMYp1GeW3agDNtmbzf6p+00HzldchzU3+XSCP3Z1fEmPQy\nE1pu+i7WMCFp5tnYdKs6uxJIusVbPq2mxgwkAmpZLn5KzXE2sI1sWiCvc525\n+SU2wgiEc9eaxSYlgqK1WJmFIC02WvmCUDd18xKhpHf/Hj0izk6D2EigFDqX\nhLtuVly/mKvnvcGKkxDBRfM5JLn9EnVL7GEPiUWtXHAn0xUiwjJvMOPioP8m\nUX8H\r\n=CjcU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlTyX0fd8Dv5egd3SkoR+7N6xntD6uweclJRBPtSP/YAIhAIYS/7lz127ZHP4bri4Do7Ask6Xy4KWKhSfr1VkP0He8"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.b7995e49.0_1600298830321_0.1580855065873099"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.0da3ec97.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.0da3ec97.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.0da3ec97.0","@material/mwc-tab":"0.19.0-canary.0da3ec97.0","@material/mwc-tab-scroller":"0.19.0-canary.0da3ec97.0","@material/tab":"=8.0.0-canary.a831d4799.0","@material/tab-bar":"=8.0.0-canary.a831d4799.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5f18f76403ebea15763db5e696b84d6d20a3768e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f18f76403ebea15763db5e696b84d6d20a3768e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.0da3ec97.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-K1kBMZcWTmtiykOVNQ47nHRNhyTJrEmxmF1xerIX+rliLF2PZyeqZ8PapAyl0GCXd/l5eSZDQIgj1OMVgqCvWA==","shasum":"ccbd7063bb2272c812327fe61fd47e7dca058130","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.0da3ec97.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaSSKCRA9TVsSAnZWagAAJqwP/ihm+D7En2j7sFlo6acq\nzImK02H92jw3ONLEk/qxTqSLGrhPxsx6LdMheyysyyC6ucIC0/CkMcEnYbpG\niKVZe/FSsc0JzeYH2Hl/AkjKV+Q1iQGxK47GP6yB7tOAKl0waUh1FDsLSSFD\ns4uIAXYTW3mZXswe4UryDs+ZmPvf98FS0phM4Rwq9B3PuySEq9H+6sgkzM6f\nGfIG2ilsUQuvy0VsU9nvhrFqfnLfpTUVF5dng/tLcyNITVT2IDtwPkmcH6dX\n1YJUYYQC6Lp+sitrWaas2pqx4HC25LXT9J4sIWKYRpMES/cHVUdcU3HDiC7q\nq3qTSR+XqCBN0RVfTtRrJIBgwPWn7nGmjlRECc8SE8wV2gru86Ns2WZ2Fn5a\nanX8ARJOsTdK2pByNEDnWi1yGI3lkO97bwEcjpGhUWSE+6zwJKTNHVl5LGos\nbsgAM1Dm/ELWv8Tyz4gHzMv1YRm9fhHZwKFOMadNDT2CGswVNVlkqO6ecTLi\nbAf/dTlgWBTw4IlprSkt3nSrJ97AgSxf3xjQSdrEIrKCSqAbSb0R+8CkS0S0\n6z0yK0V3rmbRuKXgXNhyhwd/LSDomgmlFYio4D0g2f6cnCZW/timpux7yEKe\nLkPTQ4MQnf0XzojedB7+NmIJeRmZQnS5iHORO9vWsj9u/Dl1hf8mX90SW7DC\nmvsw\r\n=Ie8V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICC0V0fzbuney7/udzVX6p+OHfdPZy2nzGkHd4CqnLU9AiEA8LF8EaZQHjC/JkrKD76o2ePobmIbS0dVMwb8GqqbnHI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.0da3ec97.0_1600726153562_0.7366420287672515"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.a0793c96.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.a0793c96.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.a0793c96.0","@material/mwc-tab":"0.19.0-canary.a0793c96.0","@material/mwc-tab-scroller":"0.19.0-canary.a0793c96.0","@material/tab":"=8.0.0-canary.4e5c350c2.0","@material/tab-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4332e148b28dc28d9b324306eb18987b31a80ca5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4332e148b28dc28d9b324306eb18987b31a80ca5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.a0793c96.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-4/pGTBe3OB4E9pp4C6TNNtK17WLeQWC95oZ+j851Wdcv/+zGLOMqYK71UUklAEcJltcawB9bCd6ByLiC5NBLyg==","shasum":"5696f32cbc74f9a04845b1f2be760ffee84b0e21","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.a0793c96.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfai7CCRA9TVsSAnZWagAAo+EP/10CFGmQdxRnXvFWCDZH\nWTUv01CWzxJS3MRGNEp72/U/E2oRuxQIkblPAO0S+mKIsWF5dWJIOwZGwta3\nrWzHZcBIb5RPslPFHCSCq529nWCh5xbWcbiJXQOqy0M00HomuohJWgi5qsDi\nbG6NsyKzy1k6R83EfCbEuvIEW67UJ8ksrmrKvIpFRWMsYB/CoZRwKP9l9XQ/\nf9jUC8+9l0cavv91eJTn7sxGXNYxzhVK+shKQAdqrhxJOSacI6Y7hwukbUkM\n+KKPGFpmsPNoArOVRxoVcIhPqWdvT0oMIQO2fMhXbkO2upr49qjzBlPCCRDv\nntFdiymhonQi4ODcuvMrfcf8VHc9BxoZTGRmerP6n4uqtiVTGnRcaQn1UQdS\n4z+YDj9qpefWNnFNCQDtcEPDv3PYRtYd6dJwHckNEUU+VTPGzhjknN/nLzCL\n2f26YB8j9rDpg9SieVz2TCWuNIk3irTEbw4tCMUM9kwLHccs52FX1hb+jBWH\nPrGz+VV4vr7lQbcvaqK5HwBLJhNMx4o78kPmJ5YU81beA2ykUPFhkex2vxoH\n1TgUjC6ydi1gsNtAFNxCNlv5YUM7ajMZ3CWK1DmuTkP2vwi1mqHuHL9PQaHo\nhCib9W96dZ9zERIgt4SLbsIdkegzo/RQTuIfIqtxPiKBPBOGawh6D9qNwbWQ\nCypx\r\n=mge6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBJIIhFQhqRhZ6Da0Hw6uI4bt/Yer5L2+DLJvBeh2B6IAiEAl3Hsu6zhAEsjVOzMz8cJmLzdx1iRYcYDVhr7otHxnIM="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.a0793c96.0_1600794305802_0.32562025746751044"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.06998a3e.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.06998a3e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.06998a3e.0","@material/mwc-tab":"0.19.0-canary.06998a3e.0","@material/mwc-tab-scroller":"0.19.0-canary.06998a3e.0","@material/tab":"=8.0.0-canary.4e5c350c2.0","@material/tab-bar":"=8.0.0-canary.4e5c350c2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"decf3423597b14fccc721d29e0ec911320eee3a2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/decf3423597b14fccc721d29e0ec911320eee3a2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.06998a3e.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YF+22vp4/XKZ3kUg8PksyN+/94B8Ocp/5545kLR5/wasiZcOq0l5IxnDzHZqFq36v9MkOG9KTQe0ECuxS7bwuA==","shasum":"48db0c0ca68f42d2cc2f66e8378510659e547672","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.06998a3e.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfakHKCRA9TVsSAnZWagAAEOkP/30d88lOAwzS4XccG2F6\nE8z6qozMUd0LdoO578UFYJdAZjKTw4+QKSZqD7dVG90cotaRoDqswlRz77PD\nWt7fmTDQXbbqcnSM6gD6JKevG730uhISAYqcTWblZLbxUmCX5KhNIb3wipqI\nOfKe9k1QqKSBD65qhYikOMzwnR+aLJWGwNn7V4PzCmUaJbWvanCXU928YMmJ\nx5drSxo/8wJaJdiQbsA9tknppolns5/bAwRhIJhAhchN3qaaJCCPa5ek3FuX\nNZIE1Tur5C+y+Ht0x6gwNOr9W7+MMXNT13kd3qTziZvbtxCvxJDG1Sz+Espv\nTs+nXDB6ixCvjkWuO/xeJzi187XAj2TNpJDGa9lWq3dSgvInzNYzuQbrcN7K\nutw8nIvlbdAPEcLYyz+hxyMlYCkvQgtIJ2IC6ra4ZmQWhjF9IeqoVQISt8sD\ngU8toEMJ37d2AMO2Y86a2DD41KT7U2nNOy7+FqjywE9Usc2D22kwhy7aPzeQ\nLw974bY7NshHX4tmj96LhUlZ7CHG0pPAnr69CDEbwzkEvAOpAn9/CPn6kePh\nIOC7bLVl7KFWvbwWYte/jWYlFtstO7mi5hCfS13ZA3+fcubciNFV0rLMJXBw\nwA+VVgVJObaEVHblxeG0+UqIRfInwi/a4bdNM8Jx0MtmNFJwZ+Zio5fRoSqJ\naUmr\r\n=M95/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE8YaJ7KdeWWbafDkqCM8Lael2YjVTu9NMl3onNh8d8tAiADu0yatzjFKBa+/wysyIo3GB+33/aIIocdP+mnnKbB4Q=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.06998a3e.0_1600799178492_0.5057904641146236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3484a90d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.3484a90d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3484a90d.0","@material/mwc-tab":"0.19.0-canary.3484a90d.0","@material/mwc-tab-scroller":"0.19.0-canary.3484a90d.0","@material/tab":"=8.0.0-canary.16c563ef7.0","@material/tab-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a495a0451ae2f8e95b786a624153a7b57c4760e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a495a0451ae2f8e95b786a624153a7b57c4760e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.3484a90d.0","_nodeVersion":"10.22.0","_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","dist":{"integrity":"sha512-YpSRiBfGo/i7cavpVBED5/wWdyl4hyAnT7YrJAf8aSPOupvAKr3/eJmqRUOCd/gjZk0OACzHmdEb0QREVJii3A==","shasum":"4b8a2e3e6ae08ce7e716ca1d7330c21ed32b8b99","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.3484a90d.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfanT4CRA9TVsSAnZWagAAuR0P/2fuFL7bXnnub+oWF3Ww\nJ6qh2qifjNHpap5kCRi1lKg18ZlHg/SORt+31ldoEdxrZYz3E4ld1jwonlMY\nV51f9AdQK9q0f5MY3vUhJvmpAIXm60d2xByFQhz52FJQ3ebEJ/+CrfnQ3Y8x\nb5kKFVMjkw5MkCEFfvJKhzhSqYziRdMdxs6qkNVXMlK0B+AtmSvmggkQcMyz\nIHES7IZKHLEakOG30ZD+mDRIFsdYhiotGUpKIIG2ZXHfPCe/u+ea2tFMeDYS\nh8wADydM2FROKkA/CYIv3yWhgrFU1iz2pnxO78tqmZyWyP913yTnDYadaa78\na1raP1h4g3jjkzbVtkQlJXCeo6Q2JO9XluwoJ7oMJsas3HN58L8grG7ZJW2m\nH7x0xByi1fFBArX3C40of4rfqJO2AKIgqfoCEzCnNINCs0+1B7JsMqXrkEdG\nuZG+obYl1oaboOQd5MthyT3QliU+9VtUvzONNz0frkYs24T+/afA6PuDuvmL\nE4ChBHyG+JDke2qvou7SsBH8AikryC/yBc9Sz/LTtnMM/x/DYk9zBUqiJnH7\nfr7MJibhGrI+eu+sF+DfKlW9fxIvNmA4SpqZbqhQb3BVu8XBdNiy0tqHQ9T0\nr99CAZPY7xNjfcAnAFnDZf91kHEjv4DX8pjAPfoi+BgU6Amq8E2OFieBZx/n\n0Fc2\r\n=TXMq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQCoS5NvFLPP4m0ed1CdqWPgto5Qk2LNjEHdVShazH4x3QIfOOftF50DCcP+HA5vxzEZXvexis7zXqe/+TDN2D9poQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.3484a90d.0_1600812280004_0.46519981144617906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.3f99af40.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.3f99af40.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.3f99af40.0","@material/mwc-tab":"0.19.0-canary.3f99af40.0","@material/mwc-tab-scroller":"0.19.0-canary.3f99af40.0","@material/tab":"=8.0.0-canary.16c563ef7.0","@material/tab-bar":"=8.0.0-canary.16c563ef7.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9c1a716646d54bc9aebac750a99d1fa752f60d9f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9c1a716646d54bc9aebac750a99d1fa752f60d9f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.3f99af40.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-vP4Mavr7mmf2YzBA2aT/wSdZs85lj+YowNAgpBdjt5Mj+QIjTYB9WGgJDA9XTIhYOmPKaHf3HVbXeDz9DN9R+A==","shasum":"c4692c897b11fd0979b8f8dcec743cbe1e8273e1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.3f99af40.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbSoZCRA9TVsSAnZWagAAdfgP/260L2uZYC3T06nvC0+h\nJXbzQtMqfjUUBjprqJIV/MwlWg9WwpyrjKGJiDP++77x8ZPplMFW6XmwIak6\n5d1ZNStXyTv3XdM8laq5xvoO3naCcF5A++Q+2gg8ciuqkn+bDtVnHga8kqon\nkcBbsVJh8BhHN1dirfNDoNQNLibbQyDwwEwQR/cDWQJ17KVs+oyMvlTTS59m\npUnkvuJ69vTwqgQkN7X7J89aIMqPIGHNDs4dVpG5reF1pVng8TZsK7PGGO4R\nUxE9V5+YFOyVCQA3E1O/JW1SZWIlyQPneJ+9UsPspI6PNXFJa9TgvizSJ/qr\nWKi0C41w/A1apmbxTQ5mIpkJbuyx6KCVMSu9XqB7B6Akp4CNu3+jrkokSwkL\nOAjdn/48mm9rYRrgrXIm5jWnnt7wYj+Q8S3MVyoY+h4jLbVMmLNwTNMR1gZu\n6olsV378SPb/NqjdZIy8J8yo2zvpd+e3BNFs14fRIgngxN1ksxILdk4Agqh3\njwTF+/WJm8hr3a/fmuJCKpaeIA+IZ9G5kS91xZh/7KjlT3EUrpAepe3wkyOR\nnWaw5o0tfcdTQzVS8LoOfW8PxCUF0i7p3ZiwsHOSwVXY7l/tfvoSKMX6b5/f\nAXMJP7K18qdxWLVQUL46SLze2tkjyvepp3PKRzpHJl2ZWL6/DURTYHVYKHmH\nWakD\r\n=8ZrX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGCWAAffJv25SmuhvP0TFkgQmZi2z7FwQ6h3MiZKWo5uAiAyCMD+X1qx5TbzjpVT83laSA09BFu5Jps2hvFLJNXjrw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.3f99af40.0_1600989721161_0.43587855912366713"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.72aa1129.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.72aa1129.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.72aa1129.0","@material/mwc-tab":"0.19.0-canary.72aa1129.0","@material/mwc-tab-scroller":"0.19.0-canary.72aa1129.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","@material/tab-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b0de5dacb779cde3abc9f66672e5a936030fe63f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0de5dacb779cde3abc9f66672e5a936030fe63f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.72aa1129.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eSgmq5UPZogbLqsSWwl8rPrdQXA6g6r0rM60tUMtxaBcT7V/POyr50la5JtpXEambqnZ1T9b5u3iXvi16QsxIg==","shasum":"9c38418915d36c337c14ee6b6aac71e7dac7ede1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.72aa1129.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfblwuCRA9TVsSAnZWagAAKlcQAKQl1x8EmbNMzGy1aHkr\nRRYNgu9BIcj9eTlXQXv9XTz9XulLDdPo2F2wzg5FIGM0VsDJx9bTqdbYJAIn\nvIfMJIKpNapZ4tACKbdPS+ubv2DakP6T8OR5SLi2jE62hVaGog+pU5C6LofI\nYfr/8Rh3zjOGHk1+IHk+qfP0tWvihXrHAqk9J6AcZW4vBNskEhIVFKP+FlKq\ncd5bDU+s7+PQ08WNdhi9UToLvkUnOWfbwSVxh4RqQV/kNgF+aigd2I0+Jv8Q\nC9mn/aX/Tc9ooyODa2Dg6aWo1YzAAgTHAuwrUj0vey9B/9Ol8ZmATaTD/gKA\nV5/nV7Pj3PNmULwYXKxRoWwS8wOCIgVILW2hZdTZa2mOlQntuZw40+RlQ4eN\n8xJxqJpyts7yblIobsrCNmjKZXHzbuHYSrJnzIsPfUhWu4IghT7QxLHJGGbR\nOGWj/vXeuPgwo7rjxV67GRXvv63UqNDXsfrjjEYFC42gSsXNB3nanEEF62YA\nAn2fEYjF6nAEdOELT6lhICXLQwexdbr8PaWz/bzAU+AAVPVNHNGZb7nIhdIP\n2fl9xIIeaXKZ89dYUHa6ZMqFPKghwiyQAtYb4uYny5nmqBTo4qHopKsIlZjc\n22tvgjcgcEk6LFycR6q+RGl4pzaAdY8DINFqRc7IIxC3B9l70MScgZyapcro\nlWWp\r\n=S53B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7vzwQ43wwNI1aInzhdmqR4sr21m0CMrJ3vRfjDLXLNgIgUxYAGHZkBubO+i9C0XFPRmllAWN8iGGytae6cV+tq8Q="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.72aa1129.0_1601068077936_0.8920670938691533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.394fd3f6.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.394fd3f6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.394fd3f6.0","@material/mwc-tab":"0.19.0-canary.394fd3f6.0","@material/mwc-tab-scroller":"0.19.0-canary.394fd3f6.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","@material/tab-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f7ed30422433da24768cee2e9ee84140331af4e4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f7ed30422433da24768cee2e9ee84140331af4e4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.394fd3f6.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-zIVzD6YplwtE7FqyGpsBX8qxKt3Rm5vc8LZrUgF7MYFjxP8BroyUlSeo+jtgJz00z+cu2k2LPW0iHr73ttrQrg==","shasum":"9b6960fd303916aca5e363040808c74d61761847","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.394fd3f6.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfce9zCRA9TVsSAnZWagAA6cEQAIZ3G46e/t2wZ0pj3Ywc\n+B38MjhT+K78tcQfcNd3vwPXIUhLWC1RXVbQhseShmGL0ngNOA/GpAOgvSTY\n26XuLGm9Zw91kOjP76xI69RDwpIAaexTnJDEUIBY2kOHX8vkkiSwGu2Bbt3k\nkK2jNC5C8NX/yCUGWCydrLh39h++xLGcbuJH9LfbFilr8H/I6wCk7lNRqBC7\n2Rky1Remxdvt5GMr3hNHbCNM9Yz6Bs3C0Fnh/Q1di2rOurKMfTpHELuRIs2C\nQTVBlYOIcbzCpYBqIN1xwi3udS/ZvpULL2/ZQBPuukqVG90ljtJQdMHQEdac\n26CpS6VUJtuz4Ug0NWNJWflwYOQjk1ZZKSpHiIEEYI76MVIlpo/sKysJaMFL\nZNV2mzvrYqw5Xq013UDOpSqIp9dZlP12eLLU1xCLvQSkHVKOd5vonmJn1hHZ\nUrUhQqryhEQzU8f2qabbFO1U35OcastpzSRI5UdJWNQJnMLrDODYJupZPdII\nLH9s1v3Nbl7H5nlnLAfi80+dR2gN9CZB4zqoxdog+G8J5Rj2ObygE2JSmIIi\nkaccGgsyBkzATtrIi4yuKdyJr03CtW8Djjx5icXzBD/Jkz5VCYhYlkeHR8OO\nxIg0v9pefBKxzQZi79ExQZiJUa8xZ/yQB93/GkdQnFnn1KMrvF6t2BO4vuER\nO+br\r\n=vDO2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA3W36fjZEl5m+xJRkhf26c/xW7DYY20bMXfiihAhVlLAiAOX+05jiUdFjkd9PvK9ZFh7Og5OEjUzATaectx2soKbQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.394fd3f6.0_1601302387030_0.1898813963967214"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.347110f1.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.347110f1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.347110f1.0","@material/mwc-tab":"0.19.0-canary.347110f1.0","@material/mwc-tab-scroller":"0.19.0-canary.347110f1.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","@material/tab-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b51682018a9a68b95f2c2cf2ebd16682dc3f2e22","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b51682018a9a68b95f2c2cf2ebd16682dc3f2e22/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.347110f1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EQz+1Xd1PcXseKbAqN8l0EuziPC0nbVNwxPAk4H/sXpPgqlglEWE74clDzVgi87ctnplprxqK0bCQAe+ch3nqg==","shasum":"ae56c9fc153a73c0ec987b4c88e55fa523263a11","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.347110f1.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfchRvCRA9TVsSAnZWagAAtjEP/RrFhghX0iBmBMXe/x7W\nA584fidE/4gikPLcu+2bwjmK3+L8wfVZJlxuO4Z3S/dn5WU+lN/yHVqr58Px\nHXO0aruETkhdFvAXIqhKMs/qVTMitNilL6dSQvIrzAMl8eSlHHwIzwB/zZ2Z\nr6royPi5RfJplrUZRZqokai8I+IwNC7ctKeqnaDy4vxNenmG+GedvzuPFGS8\nwAzAJ3KATFQrDpxwrCt9ZgNlilGhFQvQ7q+U8DOzpu0NiORdcA4titHSdA0x\nQAE26yb6OvNzm4Gp2o1H1LxYPCl3pFLFEp91n58ACluFlIP0v6+DY0QFq8ml\nXqbZR//3ACX2ltGvPmZmjeJI8ZhinA89HzsquBzVEHEYXgCYNEz4M9xcN+D9\n03uCtfaDBqTlu2OJraO+8952+XsQdVRoBWEiRMBPJk/PLji8zRK9S/gNkSwU\nbym6fOtOLNL0NYVhb5pBnYsGQJk5oTHpyJCUlV2aj6zG5XUqD7bHJHjbh61p\nZ11nR8wNE8Ib+kBTdX6KHEte/vQPVYujsWwMPItF6VJ9/Uxl7dQa0lquJiz6\nqelEcDZWFmoFKIm8nmytVUG47/NEwmegoyz6LkscRLEI4pXwVSiEvkhubbdf\n4Z8ualurhyIHhAAII0LJ4r9yQWh5gyNoQgX3Lp303w7p26fAMNYs/TvWsSeC\nmvOP\r\n=0RP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7L9mT5H6WFSNCb3nOZkl5iLNPnohdNcyxTV+0rOUnhQIgHLdcU2A5ADy8Mp3HcBheL/Z0yQg0A63pW0luYLtJGXE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.347110f1.0_1601311854803_0.73043802939377"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.5e330bb9.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.5e330bb9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.5e330bb9.0","@material/mwc-tab":"0.19.0-canary.5e330bb9.0","@material/mwc-tab-scroller":"0.19.0-canary.5e330bb9.0","@material/tab":"=8.0.0-canary.d4cd83a85.0","@material/tab-bar":"=8.0.0-canary.d4cd83a85.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"edd7d263d4d4dfba81c2b086b08b2be10b533b2b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edd7d263d4d4dfba81c2b086b08b2be10b533b2b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.5e330bb9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-pGtovIEFDl0imy7W0Kn1ewTkbjtsvNrznGGo7JmSiW/OkH43WYZnT8LfvRze2tC34XOxBg1ahvUs0eP3YHRS3Q==","shasum":"2c163500d2d8a3ff1d6a5a904a0f70978a40b6be","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.5e330bb9.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQBNCRA9TVsSAnZWagAA3+kP/25JACIsgKPNAb0OKDWO\n06HufZdGkjnLdkmiUaz0x3nR2GFSRdycsq4/dvqpe9iA7BDRodQGrcC0GaiY\nmsM4q6AnuTXrTvt4sAlUBz8r2kFqw1+Y6eADBD7MEC9IaAJ+Z4TB8cTyeuvO\nfPdx/WPVdxptZ2RRvkwWrs19/JcTdwdFHjlkVRSGkJvmjOvoP68OrqbJdPHj\ntkKt3EZbdTvHzSxfItAxNmXS1dxT0oHRsViS/oQOwEeIo3+vBx8rbX6R6gGC\nLhc0R/LvD4G3p5/f63Vh79PSSQ5mwUmqm5Q9nwgwpmOFO5UF6yA6cwkTV9DN\nCdQPMg8G9xCc52P/Va0e8y29TyNuBDwCeqeaQ2koUIYBxd6PeP7m8KKVwIYo\nG84aGs42xCyjQE6LuJczyFZHQqNl7xcuxN4XoZ+FmyCFot+cqsR7U2gX4hrC\nMbByZ9gZ/FcHYnpaBgyJBUE5doM0Q+Ekc+u+A9ehP60piMUO7acOFQpmbZxS\nBmbm1OIj3m0OgQvt36jTr4XIkBHmud+rdU4yX6joB1NENb/07ww2F4WufaCy\nRRq6c5jYlP9lfkdOvUtQtdi3nzEVB9bJAeI5gxGqZwuKt2VDR6xN4HX6XQ2I\neeMjHcX00bElLfQI8Bv818rirgJvvVRX27qOfafRxGWA/h7yczm9Jy3MzcaN\ndicc\r\n=nGLS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDRlEWWJYXB7X8IZV/m7reREpdJz/tZMPc34CVrC0+T7QIgJ9xffjGFHz/SnaxsFmH2I2TikQaTsbdvb64WIE7nybw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.5e330bb9.0_1601503308463_0.7006120768184227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.30b9e3a9.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.30b9e3a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.30b9e3a9.0","@material/mwc-tab":"0.19.0-canary.30b9e3a9.0","@material/mwc-tab-scroller":"0.19.0-canary.30b9e3a9.0","@material/tab":"=8.0.0-canary.38ef4501f.0","@material/tab-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dbc47f1a0c4601e30ed5a9eb0fc9f9b56564e1c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.30b9e3a9.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-Rh/3uSqioRFG0CqQSyiPvk9vT/sWqwHKj/Yn9Dd1l4WQd69bCcrxJcTfpqxhzuqeQw+zJci/Ixc8OLWwXwmD3Q==","shasum":"356e9a48761e9f0f8eaaa5d8d798bafe2890fef9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.30b9e3a9.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdQj8CRA9TVsSAnZWagAAKuoP/2C0DVpPjWWaTUbPy9ZH\npwbo4gN4Iy+R3QZJiYfLvgVZGehg6QertRvVLMEwOFi1iWhDCijngzNai5tQ\nxiOcG2q7gCa1y/yLekKQLijx1QER5iCN2Mb67CmKnZ+P9wo785jJGXMoxKzc\nEW2/klbzjau1RqVVLHZcw1ylTEICrpEFSBHYXB0gLWMFTBQuYQ0PcsNmhziT\nFo77RlxtgfsQDPUjLFzOqmEfgEee2GoVSyA25fMLjRhOcb+axgNOW+Rc/NJw\nATfvBZYAZaruL2eMM/jnjVIpWhSJPKZzhoomzeD9uAxs6NN0Fb+6OLkkIQmC\nhOmJvy1oFpkuYM/olZhj1MF5noD7TY2g4xHaZQ1Z19n8D0oMJ+xkRvGff6fa\nT69nAjgQwtNFBUTz50/jMNREqRPlxbDIiA2wpm1nuveJS2ys8lBaKPlQvD5U\noG7jIK7JUMw/9IU+VJX5QOWXGtBZyro+gHtigurO73uy8t6/m9pEzbVcGwaX\nEfhIg6inOOHeshyJYXxqifEIU/kfKTJHFtNVloYtJGlDGrAqzygj2jltJQ/w\n48G27VV/qMuXvP5bzWfNyT1D4rjY+LG2QQ9tAehRJnc7DCpXufEe5CnXNQ4O\nfu0BFtsyVJkVJsP187GM7iFfW2pfGL3bWvZ8hgmNFxtRepdv6aWbf1o+Ro/l\noYhl\r\n=24Bq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICMJMWfSwcWT78RV13Lq5vSo6/3E+hyhXPtAuIZy4pOVAiEApuII7Yb+QTCDJGXgfLNLyUTh39Tdh1O2pcud7s8XXgw="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.30b9e3a9.0_1601505532349_0.8721937731892484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.7bb04b9a.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.7bb04b9a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.7bb04b9a.0","@material/mwc-tab":"0.19.0-canary.7bb04b9a.0","@material/mwc-tab-scroller":"0.19.0-canary.7bb04b9a.0","@material/tab":"=8.0.0-canary.38ef4501f.0","@material/tab-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f4137a832374dd43b862ca8a4db665a59c1a70f7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f4137a832374dd43b862ca8a4db665a59c1a70f7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.7bb04b9a.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-gdi615shwnHBk9Gl6n22iXg9jG2ZhcFwDOeFf7fzEcGjjzoQRvqM4PfZXDJ8Au6vNdP4/DoSsgI4aLtj29qaVQ==","shasum":"b42cfb50b3eae2371b3b7b957bf5bc9f5a051d9c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.7bb04b9a.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdmT8CRA9TVsSAnZWagAAWAsP/RR3H1bRGEZB0w7jNVDL\nMtzYF7DcHv84X4w+KqE3KqodX9trZQ1Y9gwe4cTFfoRA48ecQrrzqesvGN7T\ncAL3px/1gx6RyZ5BYP15C0wBYASneE6owbq41tHxWlzHDRg+d+ta2yHkCkLA\nB1Orkl/qBAh6/uezXWYYPRTsjUSC+fF84ouIyDX4sv3YNiXwmhve8GxKnltn\ni7jxwPspGu80PZVfM96fzqSCJcc4LyAxBQoI0hTar0rKytI+c81jRxWWGIOR\nf1M5F22xEb1veml4ir3ezDE4DTbNJ2iwo+AUVuzk+JO9LV8m8ezqC7SnBeKD\nheY3X44D7Qx3QWr3YBoGD5GZaOed+XL+FUsyTfaYtOcR8w0g4gKlA5Jd1+IX\neEtRV76N+3o0n6EHAfJipdR1IYA/zaU50URlzBWgvycg7fC7Q4lvQpOc43ST\nQyizdlsScE96ZB0uO4u3NOKGK3/HnSlnRyKsM0meKYI8FSlRglKHgqLAkIdU\n2u32xsKVW+8JSngBcCFE4YGcbyl0KZXPvGvsTnRkCJ4PsuPee6STbDRlw/Mq\nEDJu9V/VwileF1F6RrmOovIL9A1nuipw16kN4YC/VVHAfBQRd2hAHlXqrvrV\nA7vuSsaW5b3yXxCQbuVZodrlohAnK+SZ1HPmWnBhaaAam642FVKBHaowG+LB\n3EHx\r\n=zKSm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG6hGaNj7FXW55hhmRYCrLZbE97BCBo+rzoOJsLV9gRaAiBEqdN5iAQuOyU0/RWJAUBtBb7IkjvKh9TeBWPw+CQqQA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.7bb04b9a.0_1601594620041_0.8696760212367807"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.615d861d.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.615d861d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.615d861d.0","@material/mwc-tab":"0.19.0-canary.615d861d.0","@material/mwc-tab-scroller":"0.19.0-canary.615d861d.0","@material/tab":"=8.0.0-canary.38ef4501f.0","@material/tab-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31f7a82757513b3944c605422e6c70eef13bbd54","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31f7a82757513b3944c605422e6c70eef13bbd54/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.615d861d.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-11Bu/8A3+fDQQDE6H6U0R+AcS5m8tS1RhrY4su0+DaUc8jZaRc4xJ7LbXWHbauW5miBeEcndb3Kc9+KOh9c3Mw==","shasum":"abf88bf130bb74883dc7781ce526489076dd9649","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.615d861d.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdoOGCRA9TVsSAnZWagAAVqIP/0697yixoXm+RKH3XTxm\nZeV2rvVjXCYsEe5dv5AlOJ1nhria81s8bjm0Cs7LgpFGvWuqyj1JXVZoc446\nXP+Ja3dFB2pZRs68Mp3T6YKedIC3SiMFbqQ2Rmk0X89N7p0P4p9RvPBeXOKz\nxtmRW9PCaDwiHxqO0WktI02qMXM0+ZxjsBFtGGwuSG731OAjTS8tkusWTI1t\nTMmmHcjHR/dTzx1mnstAGSFu23KuE2fzj4i6jyx0/K5SHLRuwf244BuDqjq+\ngKHSXQcJTRwyqg2kKMMJPyVGqXw5mxb/6HSafYwCugt88uuaH4jziiQplOYb\nhEftTrrqvHKlSaalDGek9IUdodin/TGfobW5EIAF09Jd1EFRrOe9H4bnWD5J\nHB2pKDAU6sgb9S0vZby+dkLC5bXQElOSvedx/jnINrPYE6pXuVydidMtW0cs\nAKDWRDTRS6MvJ+0DbgiHeOd2DVdLjxqlS1gv9F8cropYT/FsS0Agk9cAXCPL\nnY6eoJdZzNEiFO4+iTZWNP5MnZTcVJNT5kYWaq48Me2bSJKyrrUHgFlyQneq\nAv2D5nJA8N0waFIiDDqtQWH3wOTHrDFEWgZB25qVqPFRrgWPkd8NSJmuYj2d\nXQ5WfQVj6Wl0cWjW+8YomVSIP2P1vWcHTuZ9M/LPDfi23ssZ83wvOA2PBq57\nywCf\r\n=5/+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtXk25OCg2036tvXU5VS+HYjBPPzne4tiOt6KphyEXsgIhAJnpTcvWNjP17Khado04Al2AUzl4V4xC23w1OtkbHFKL"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.615d861d.0_1601602438443_0.061159321749105544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.af110e86.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.af110e86.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.af110e86.0","@material/mwc-tab":"0.19.0-canary.af110e86.0","@material/mwc-tab-scroller":"0.19.0-canary.af110e86.0","@material/tab":"=8.0.0-canary.38ef4501f.0","@material/tab-bar":"=8.0.0-canary.38ef4501f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec4508e75df333e18bfc60188de82eb9e90a6d01","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec4508e75df333e18bfc60188de82eb9e90a6d01/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.af110e86.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-4Z9CjA0J6VS1I/JCOmsx5s9q659yBknwWIfm4IbLeM1pUkyN/BP3kWrSGE9st0x784vpxffaimS8f07eCmXBrw==","shasum":"db5cc6d728e82db63c592558a74bc86f296989eb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.af110e86.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfd7zGCRA9TVsSAnZWagAAxTEP/0WvE7nOgY5flKETETab\nG14iQuD2yMZRbp3DHNG6PJ7wUruFZrj03ooj9DA24HHeHaXMYectHoWIcnvv\ntMCabNkU9FRKe9Kqg9gV1MhOsVzJXWc2ekY8Nd48u0kErqSX7Av3NeUr9cf5\nXiDkujtN7ELU0tu0KKp9rPDYLWTXeyRQaBGJ2PlxPDUyDRxbm5S+VKw7bQ8/\nCcPLe8l8sMjmcVGNPoKT6fugKkmXrI7aResEw1hxHtwGkL+6Y36Nqd/7uU1W\nELFG34dgoudcnlIL+YZCKbuQ72qSMWYvMtr+fzRBt5xzmRtW/1KARLSm8nRX\njwqRCvAqmzduQDBDUKcinE8Q7hu3tpQA0NcDU6RWAtrQx/Zc0jT6XUOrwYW+\nr11tMR2wCvWH4OYFtqlhm4GMt8y/PajSUCeM8nJ0NPdM1aG1/Xm1aqbckZuv\nlnXBbEdt9j711amTFSk76l3DcOKYoFPDixqcnHAqjT2ArVW9h1xIs5l3WoQU\nIEiMeen6Xo8b9H78e2MTzxoXYqwcIwpRTcNt1zicSPDkt/2D0M0OoVBkPZza\nWLDwa712stKBClZ8u2AHkxsjFDm9mvuZVWhe4fhBpt7yT5fag5G1oTAC2nzR\nK7j+OwxX7sZdHcCyl6sB181KFTeLqGzsU0Y/bYvwSOenPBSdx2i2/rxQdSTH\nAlqL\r\n=d3ZW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6KmwIl/csEIrPGLwAYSkHgV9SCu9LTmgjcVLnAEb0ZgIhAMlblcOwE3w5iDXEW5vc/MsdKPom44mOdd8n8POnqQCH"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.af110e86.0_1601682629915_0.7322999617230084"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.89d27ca5.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.89d27ca5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.89d27ca5.0","@material/mwc-tab":"0.19.0-canary.89d27ca5.0","@material/mwc-tab-scroller":"0.19.0-canary.89d27ca5.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbe5db689dbf4abb9f299c85581f7fb95f80ceae","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbe5db689dbf4abb9f299c85581f7fb95f80ceae/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.89d27ca5.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EPJEuuMGizdf1H4ZYe/2DjV2hxSbzFPnGuzxKbYYq37ZKciXnzT5rSHfbwrd+HP3X0DQo44a2On6m9QYq+Ti7g==","shasum":"01d4b8deb232ac9e49ddaf880f0a5fc3c69b774b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.89d27ca5.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfe8gJCRA9TVsSAnZWagAAhxMP/A1AJUgGQ95obwf+a4dZ\nBVPhwP6E7VpkYDwVuRzPSej3peRxhQivBuqSXHAHdxbW3WJAhRWZ4LZfQhlY\n4eYjH3pZ52BM5Kyxtx5itQ02OQoGPy5waxpljh1PHkk6MRdR/XL8jWxKqISK\ndyXlZT/sWGbfJBTwGMi1m7YBVGbvW4vAvtCtNZT8Dn4vltbiItEWn+/8D6H8\nMYWsP8nus5DO7CbbFmoBdif4T9ThSwRSy0f8nMfGZDdWHC5A9zuJj254R09e\nPPQ32jcPuUDNdC8l/1o9H7LSwxHJ1Dqt/2Dg9OUrg4+b6+/Vp1vumgLEBzGr\nzkGeSIqXU3MOXYs5S4rAVducHvewWceSyuxuMNXmOWpoi8BG7pjntTwReX2X\nkviTS5lZPaCf9fFXhxdfX3IpG9P/hb3yCZlEwyRaVDoPWYMsKEWOuTufZ6Fg\nK+5NDAFbkZhXtfb3Kl3W9rsvQ34kgWj1l6yTByqP+nxKj8uE+WnUcygzpspF\nVkQf/ipkvE92kS37S203srOpaI83Y+p9aA8EiBG8NmnUuDLKU1Mtrm94eu8o\nQ/6aF7ZuOKdbjMYx04WhDBH3AmGKkLT2oK1j0HseKEJrWY+TCtE+rYPSqS6P\nFOyPwGQG1m1FaTsjRXkavNHwA+0A3NfZI1soIQ/CJSVV2lIQ0+gqgWBtvHtk\nZFjm\r\n=i6/W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZ5pQmrjdqxtiArumLNbo/rLmU1N2CxgK8RG16TJMJzQIhAIYXQ9B4HNnPnoVWq7l/jiXELaNXM3Q1sTyKL5rWTCkt"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.89d27ca5.0_1601947656828_0.5030405320105087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.9ef2e7c2.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.9ef2e7c2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.9ef2e7c2.0","@material/mwc-tab":"0.19.0-canary.9ef2e7c2.0","@material/mwc-tab-scroller":"0.19.0-canary.9ef2e7c2.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"05ef0de8978ff84725428953056488d768d115b6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05ef0de8978ff84725428953056488d768d115b6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.9ef2e7c2.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-T8pQW99DzK7QNppdfutOChUx72/Aws017bxWkYm19mw6KbZAMp/B6AEMaENXo/KDNA2HtTKSNzHVEc4FfQE99Q==","shasum":"0984f00f82e7312b114fedc229b042b05189281f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.9ef2e7c2.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffQiDCRA9TVsSAnZWagAAQt4P/1SELJ25AILFqJO/TFOy\nEY+od6LN/ohl7pzFvlIIa64jVV96Flid3r8XGqoxkYDE89x4T5jNHlkbMZyc\nEu60Bi1MFXf2s+2brG+D1AQFp3Zb/ulCUhLISFw44c0TV00Au7gqrESvvnGf\nzuf6TIVZjYK6bzZenPyNvzXiy9T1RMsJRkixVw1alMuMjRISxNedf8wsD34V\n5/1AjnjDZMsUGEZoDpR/GC0K0aTlJ1c8HW0L3wM8NlbodP1fPS5srFja6cyu\nYCBPd7Aua4TLg2ftt96+Yp3BHfxdJOmcRHEHaBXAK+do0HWVy5AmizI5384w\nQwCYI5rEzN3snCMaZvGhBZ+W4Eq/+aecRoT3NkjIfg8XLNRBeTBkaVJLUGWO\nKDBKAU50iL7uITgD1mREcy7oOiDNVne0T1yRnn1WiG9ItXzjw1HM4kUy8NhP\nBvyjlVGd77thLrNISK35uVGrOJVIdMCNNBgBiIvmwl8G2fveYk/IxocAeNKc\nwt+1F6FbBpLZ/m2LWJL/xDBgQJVdopzLQ3BN7mK+RNf0G7L0s5GwBPX7iq7e\n70wn7BVsENsPheFPsH1hr8a2uVOmdWahtEjedNH4j7utxCRUZKAxHVlDqICe\nyMnfxzLFXOjzedXjFIqiiiG6bpfsJQBwbKzJsFsI2SR/XjzISOmqt8U4r3NZ\neeVh\r\n=OgZv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD/3zJju+IlTepfL9NPrhN5hwGYxgwnyINAOcFZZQ3U6AIgW81VPapZecbsGheqpDnfKtNH2hNg+2MgEdqHvE9g8ec="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.9ef2e7c2.0_1602029699514_0.5983334715581969"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0-canary.96c8bdc1.0":{"name":"@material/mwc-tab-bar","version":"0.19.0-canary.96c8bdc1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.19.0-canary.96c8bdc1.0","@material/mwc-tab":"0.19.0-canary.96c8bdc1.0","@material/mwc-tab-scroller":"0.19.0-canary.96c8bdc1.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1107015eb30f3673820101dee6e42cd62841721c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1107015eb30f3673820101dee6e42cd62841721c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.19.0-canary.96c8bdc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-cIjmkhWhVTkPbBvUGkTztyA7wD2U0Ry7q54meVyhEU5fuBd6jbAJ3rfToWsKtUHIb11ZVj01mJ1XgB80ZObbBg==","shasum":"8e26b42d5b9700c456c8d758de373659459a8e2a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0-canary.96c8bdc1.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffiAxCRA9TVsSAnZWagAAyyEP/2zQpkIn8i7RhtQdlsyz\nHFEUEr895T4OOobVk+38MVRTFlSWyjBwud1+prxceIZQZYONTPHcahPkkTx8\nl7yMr1bsvynl+Y0ytW3dTOLubJmk4OhX0JgrtdLpxhHq1KUhUnDPiuiB7YcS\n9a9fbA3z0ix0t36LCbmdJqxXD0oPSocJpfZlsFpFlBUFHMMrYwtMO6UZnpif\n1YhQ1GrcOahQn4cAKw0c3oFpFo5YJnEsvkTNhVDksoH8/D49/EvfB7V9qsqY\nPzijVhupYWe0CgghW+USWuY9WdSIrY5M7ict47DEwSqEVaecMnS0x8KGul68\nhCUCLx7tvpfoYVAuaX4mqPp2H2Hq+XfQ1q83zVn0sj973OLmiIAGSb2Xsn4A\nkTEDg4Jq5jdG8SG2QQxAS7bkKnK4v0VgGDM1IDEiX6r44c9uzFqaokPNDHxD\nc4WTVn9RdTjRvItaSkhBEEDInyYxzlBHyB3PWxs0f28Dpeh97BO6uU5p1yRY\nCtjnsMCI2juhHhjYqfG19PA11b4HYr64z6XUmQwNdZxiw4Tj6K4Myz1DIomn\n1tWhepV5erB4ZMULdz+bsDpevTcDioUBOGxPfPx7KpWc+eczpFRPu2PUXLvJ\naWRpejRJAAUMO/dQzYThLV60RNSWdTE5Ta+z/cVI92oWJdKeXJDmXWTqnPa/\n9B6I\r\n=byXc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD43HKFWatDyDay3DcjwygdMQ4eLWeclJJNNApIBmlEAgIhAIBcb48pzOySW3QpPzkgI7vkP8CHwi6gAeY7Yq2dgqir"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0-canary.96c8bdc1.0_1602101297075_0.07879808449824388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c21f034.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.6c21f034.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c21f034.0","@material/mwc-tab":"0.20.0-canary.6c21f034.0","@material/mwc-tab-scroller":"0.20.0-canary.6c21f034.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"367e1d2c78522b5c85dbc2693548d691c8b84d59","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/367e1d2c78522b5c85dbc2693548d691c8b84d59/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.6c21f034.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-eomtdahmsdi68Le2bsloViZybWr8WrrkZFPqSm9hKgXs86rlMRx+V1u7bqh/A/feUSdtHI8okZsvmTwdabUlDQ==","shasum":"6d5527154ca379d38e3bbc793399443bd824ce6a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.6c21f034.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkGoCRA9TVsSAnZWagAAIgUP/jBRl4M6+XWOZsB6cuzv\nmpf6jS1laPfp0elV37QnP427yhhrlFcZsiOY+oxqCWJVaZOgnWOinBXDy7EW\nksmJs6vMMm7cbNSTLYtY+f2JrXIYqjPb5LZOY6JvYIeXrx5nul5WiD/7gD5b\nPecr0JLnCK8XzH40Em4RoI7eAp4oSA76LNFkOAweRvyOwUN85uIk2zoO/Ikj\n2++2cYyLOV0wS0OioXzC0rbomVk4puCzj0HfGd9l+pMBEZaexCk1ONLSUA0r\nkMJc8gxO+IyEoviUCrfd//ekZVmDA1bVry0lzXl2nJR/p1yV7H/3P72tlqTn\nBjisO+Z1ZVJUgt9gVKKzRcGWZLy0SpeOHd59Sx9ufAAuy9/IcrNCpDUqv0z3\nSUrz8Dk4kQPTuxrBsYqh5kgAz1xP/+c41q0duZCZ3kC42DiXzu7DMhVdUB2s\n12BfJlczhDHtXYzkybVzYT0cjF7jDJdRWcj4fhHB4DG1AnT6vl+uk51w+XaH\n9mpzCThYrTOcMuDTKapRzMDV+8D3vnNuMDY8nbjsdApaMWiKmhWOgL0wrfDw\nBAZ2p1OSSLwVxs3O1ryfjccuwg9Xf5+KNo5qdHbz1eb2ewN5t5o9JIMETDpK\nCAPfxeLb0/UXAExJj9R8xo3cTduV1wvL+UQLx20GHUY66CxzOcauvRBAe/oa\na0ls\r\n=+TMz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNeNMVpeJHIrK79q9METOb2hA8Fi6t/gCyURAcKc1adwIhALQ07k6GNDlseEXUX2tIgf7++zyCR7/b9h8etb+YzfzG"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.6c21f034.0_1602109864189_0.5531894460595776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.0":{"name":"@material/mwc-tab-bar","version":"0.19.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.0","@material/mwc-tab":"^0.19.0","@material/mwc-tab-scroller":"^0.19.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"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-bar@0.19.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-f6Qxsoc9YdCFChW1o5LTBT6IRKa/8rpTrwJsmkMSPHmrJGDpldg5l0DMYuj2q8OvhqfJ4sXG7lvtrSjXK07wYg==","shasum":"f9e641219c00842bafc6ae120d1034c609c40854","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.0.tgz","fileCount":13,"unpackedSize":45541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJffkJBCRA9TVsSAnZWagAApl4P/iL4KdzrZ9/PEyHP8Elp\nD5qn+NxaN3EyaNUIVNuN1aenBzZi6AKlpZWHaHyIWxqfOI/xdRsrdQa1KD07\nOlHGQPm7K4WVX7iHsX1RTaDQta6NY2rE1bH1aEh/BJhaVVh5cGqOBEqhbs1u\n+D+3+x4hreAQMlV7ZuUqtc1g9CjmWcc9xEeYXxz51u4tjTlj1uuJsAl+oRg5\nCP7qLtfv3R0K42Pa5Lw6gSd5moE+t/Im+QlwvNxDN2Apu2flt0aYKjwOHwqQ\nOPpueAG7Fryiorzyx9/nlktTdc9hBLRvn86Nkqe4Bt54/YRer8j76sVcsR7c\n22daA36Kbpu/FaZj4hMerSBwGQXW2+kJnUsnsYI8+Ayuagnqt0A1whrH1KF1\nm0ckBXQXgiA7jutOIhF9Kf4ZfFdg6sRTKG/jX+mEs9GGe2TT/m5cqNRRvyNR\nFllPEYu2PC6sJqzkIzlN1O5oLEfPEvVh+ax/13cmTnJM0P8sN/q6eyoIx2KW\nGU26V2a+Dkh0p6UIc/8EWOHfFwF86Nei+twpbn/G9V50FBnqr70qNuKidELE\nl/MWemR+29M+8+m519HruAATqC4LFGX0JWhq/2F5LwMv7gB1X1zX4RViJfAC\npMJW0DYAPstNaDUlJok2j9bNEC7PTq5F/mDh7aa3U5Z/nL77fTOvjvFLQiy7\ni6zJ\r\n=AoZK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHs/wfeznpd4VjukGRWvjtX+S4f4aHHw6VpprOfdFRQwIgO4DzB5cK5KZj4MbevSJqYOQ2Nymwv82VGw9Sga0W/wE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.0_1602110017239_0.8237376333240711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1f026aaa.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.1f026aaa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1f026aaa.0","@material/mwc-tab":"0.20.0-canary.1f026aaa.0","@material/mwc-tab-scroller":"0.20.0-canary.1f026aaa.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3082455321637675854584edbbfeafa95d95dd1c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3082455321637675854584edbbfeafa95d95dd1c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.1f026aaa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fYsWvChF6M6+jwkqp2nw3kCZEgjPdh/QQW92myUyvCzKQ3mRde6Zy/WlYi6ReBZB+sJuv3vG1GbIFKC5TSJsuA==","shasum":"db492f4a91822c731f58d8459bf102c47377444a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.1f026aaa.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5iXCRA9TVsSAnZWagAA5cEP/ROcncT93T3c0yXstnCj\nyk2t4KDC89wLh3wztl/GHtymN5Godjlj7wmaApn8N0kpWdsrXEGKFTbw8ub/\nZ3DtIwuONkMjUnU6MZLc73L5Eroak8D1AygasY5jwO9hGW1Z1S+KtxUHaTk9\nG1BTv+xqmzqbjaamise8P29FFPw+i4+fqHt/9fc8YzWOqWX20AAZOUQWGzHy\ndANBhBNSFijrYnFbaIqhfXG7/Ry5+2SmAkTa2fS0r5B0JivmZVOTuUBOdJZO\nUjscMT4ENAf8gN2DXcrLNqmpucg+QGn/69hYFaPxIvskM+EpnrW4jd0wH8hK\n/acyrV85Tn3IBq/zvyFVTzJx6mCS+moCMFF50wpIbRGY4L2pYIdhgHTM7TpX\nuWyMTYmmp8VSBJ+RAd4kPnNKn+02+uLLHbI7BzZHGMHgYeE0OObKdrRb4b9H\nORiX5vtUCV6LxfL9OPzPME+PRUym3z/9HEJPwipTh9vBQGiq69WAzmrhpqAO\nN//0xfacMntDARRBns/L6QOCNyySneVJ5Y/MOnnMU5lrqhR5EwrBXPQlEbJe\n42Q+pZa4hdEuNgJY3mPUtuZ79g47D4X+s+45UWqxanphoAcrJ8Le5K1rySAF\n7ufc2KAGHMNeeOXseCy0fzu9Y10Hnij/sYv04Av5RCzWrEqWDn27vwut5aoc\nVJY8\r\n=r8cO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClKXNEY5QLv/ca4EYQ3ppAQxy/h1aCBE9hJs5Z97NyMQIhAI+VOuZQmupR4TcRu+IM3ffVNjljrC9a7c3eb6RlP2oY"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.1f026aaa.0_1602197654918_0.9724907968778249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.19.1":{"name":"@material/mwc-tab-bar","version":"0.19.1","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.19.1","@material/mwc-tab":"^0.19.1","@material/mwc-tab-scroller":"^0.19.1","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"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-bar@0.19.1","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.20.2/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-LLC4cePI+oXw4lQ1NpxQSq0SoPzxWgWYmeW+g/JhiQexVXJ4xp+0zkBALZL5hXTv6hWBHea2yGE1o9q/3zoloA==","shasum":"bb427387e5ab34cb715ddeed0b110669775e01c2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.19.1.tgz","fileCount":13,"unpackedSize":45541,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5tnCRA9TVsSAnZWagAA2GkP/iBFeN6FV2xIFGInxG9p\n2hgMhlVLxqSJmqa81QIgB6R/eL7N8NX/B+hV5QHmDjRJRoSewvufbZNrv5v2\n1Fl1oxp0JiZnaczgFtggttIwSoiN/TaMWUqZaMvtoL5/YEuKP7PEFcXV3TUW\n8EJFQ1UKs4Iwp009wJSeQ86A4Ia99nza+23a90mOBF9LBVVRNRtk7GW3dFUg\ndHitxQAkZq981orDrRIZHPl+VAW87Daj7zyFkbCa3gSEQV05Yv07bXpk2QFj\nomaDnzepKvGn0HPOY21KdEx4jXDkrr7iJZqQScqWhajP2efX3Tf0AfyiwVBV\nCzk1dXq1JoGbhZmWSZ3VVnoMXnZu9LKJMJni9fYq1s+Z2VDskdmcakwODNMn\nuPf+47ogmm52ScUMxk92UEcaUH8kHDn5Nx+PUY1l2f7gs8M2sbSuCvmAlAAs\na6dn8+owzHcLLvfq17uKGZZOnexEAeUiAXza49grmd7j+/OJAVssayclnOWK\nHU5R1xymOfHu2U1A0HBhmGZYtwVQA7V5P+UN19ObPHoQB3DxPwwi0ivmwE98\nUMeWR2pw3OnOFfgk8O6WAqparWW+L0A+Hen6OxoQ70LrfQSWtCAh4MK7gR5W\n8qaZqi9gpj3OjkrLqj86v3+XrTWl1L6jJzQUAqmBhEgFQt17XYpg41gUp1Zm\nTF1+\r\n=yFeO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWpW9PGo9VrBPHlBO1gYM1rxjR9QP3B5g7xtlfAmi45QIgPNj8cfxiWFfXszYWilWoOWaoNR9pwnKyNxif12ebEDE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.19.1_1602198375372_0.876436143618962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5f6894b1.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.5f6894b1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5f6894b1.0","@material/mwc-tab":"0.20.0-canary.5f6894b1.0","@material/mwc-tab-scroller":"0.20.0-canary.5f6894b1.0","@material/tab":"=8.0.0-canary.774dcfc8e.0","@material/tab-bar":"=8.0.0-canary.774dcfc8e.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"63718fb08d28bef1d0a9044bb2ae8026b49541a6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/63718fb08d28bef1d0a9044bb2ae8026b49541a6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.5f6894b1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-aJUxs26DDy+cCxHBNzGhgo+7F4030xr9uU25kuY0d0uxXnbqGpnuuRHXdsY93qsEao6Cyqar/5kAviA+PgB2Xw==","shasum":"90be69d4988753c8645f83cf4c695cdd1a086aa2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.5f6894b1.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff5vECRA9TVsSAnZWagAAGiAQAIANDahhioWhGaIgtItG\nvRNahmrfFV6/GYo6TgbZgJJK0afDIs7b36b+yYe9gE5HVzLsPqGRxZEjMeZT\nKkn/Nk+vDTYave/aM2fEdz6f5ttqoVfqkNFhEoWT7oToPAoqKwjcVDcY/Kna\nEYtY1QXJiuL+PccKnGW7DRkIICSy1aLdduzxodp1e4ou0ucZhBVzwDQWVVDT\nDVNz0n7UecQ2Lm1oSo1ptnRXJa9DAsJ4Z0RnGHOwvXGCUt3FxNDOX1JMef/3\njL/G6b4AdzSfN7efIxH/bcvsp2eMY+Fo5DBeULQxloJLyJm7FboHtLBKqAek\n82btL/OM/BEVIQ9GyAMwTLb/Kt4abNVVCyHhDocjK/YIqwcoj9YVSHgkdNcl\nLXo3vhyNKnDNUkXsku3BCJMcJ7pjX76ngFsYRVHyHEQvp0ONWMETGJc0Rp5+\nHLZ59bVjgpo+GapGTmkhmdRZkhwtaxFlFNH6s1LyQw25/NOmbGn+0aTHPBRq\nPiTxDLCCB9Je+/xUYrjc3G+EVcWUdXBERXoVi6tKaIJ7bnGWxPoMZlcQ7itR\n+huW/t45JVpt3jvwISe7iPjr339XYlHBiraMOourHkODoyVLTxuQBuIePv9Y\neT/1qhyXJz3FiEaJV6mK0tB2HdE/Pfk3HZO2Of3AdSjXGK/W8E5nGQ2Pybb9\nZkWL\r\n=V2RD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDI7ODR3Osx0pm2Sdo7kO/e4rG7EOeY0EM/b+5zA1MyJAiAVWAkWw/4DrjaKkvS6vEXnFPgN29tLmmvZGG+7pQS6iw=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.5f6894b1.0_1602198468120_0.9994146668560384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.f6260d06.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.f6260d06.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.f6260d06.0","@material/mwc-tab":"0.20.0-canary.f6260d06.0","@material/mwc-tab-scroller":"0.20.0-canary.f6260d06.0","@material/tab":"=8.0.0-canary.8a39352c8.0","@material/tab-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d0f921476509811c1109c8805b0eaf1e5cbb3218","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d0f921476509811c1109c8805b0eaf1e5cbb3218/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.f6260d06.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-a4YCiZPkVFdoK/wt8kVcJaZa6MjHTiq1qb7F0/zbymR/TnuY628SwEzA9QmqQgA2g2zLcpwpCXDdoldWsX1HWQ==","shasum":"ef41acfafc9ad72c887e3fdf9676f2e0c8caade1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.f6260d06.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNoKCRA9TVsSAnZWagAAS44QAKPWgm+3/VRc7yn79cEY\ncOFxKDFMyZpwI9buyFocHigtL2unxF2J8Etny3gDWYeWZjUpfkWlhsNI+an/\nm6XsfMAp8t1AKq5b4iwAL6rDscBaY6QA8I1YO7Gc5218wCZ9W32WKQI+MqHj\nlbhSjr1s8R2ABUFZr2FtSjPTV9usq+DK3/owHUu5RGAwJxz51/ort6K3/cGv\nscavEIKiGzkVGQGtSjp/Fs31xm8Fp4Z/f/K8Tw3t39uatKWBqxdsqtEaGVMJ\n9xe3aHqFZPJ3vw6zLDSA6bpxbFrtiDgQuDl0g4wClrU3LmHFCqIPANqOCZ6G\nVckg0WECVPq9N4XccYeqvAII7q7V20zoHmCRyByk1pJzS7pZrlHhJBZLz/hd\nQtGhhTejQcdpZg3FfN6RrsgmgcEN1B6Yp4HIJrPSngDZRQQ0oUyfQFdBt4gK\noXziQ0Ov0lTSrDOEGdF9PrpLHUgZotOCTacxpBFKvafpmN9acxea+7qbkxwH\nHTef3PRLk16heWHr5xDmtEdJoNNKoljH8tAvTh+cOYHD0A1p7VCStLnB+xXq\nFinVcr0xPlm2t3DWqh7hvNPxSwXxqPgoWwD8BNvtLiG27IStX12ZfyPbeI4K\nmIqi/T/ztieU+xoFTfmUrUxoRSSoq3rgN0sYFxcdkNv0rAju56/1vmMfPG9E\nd33v\r\n=BDqf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCtZgSEeSQJtJKq6N344QGoUt6pTbEuwDT9Y2Jt1rPzygIgcIyRuat9JF7MMFqR5svuOOyxgkrSBNKMo+4dF/wjNag="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.f6260d06.0_1602542089330_0.5450778776131067"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2d1b08aa.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.2d1b08aa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2d1b08aa.0","@material/mwc-tab":"0.20.0-canary.2d1b08aa.0","@material/mwc-tab-scroller":"0.20.0-canary.2d1b08aa.0","@material/tab":"=8.0.0-canary.8a39352c8.0","@material/tab-bar":"=8.0.0-canary.8a39352c8.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecded3a50181254f2caf9e2d7049466e24129104","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecded3a50181254f2caf9e2d7049466e24129104/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.2d1b08aa.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-fwsKoiEveTUxfPJ+2vLnrSqv3rOQeQhBLZHZ3CdlZ6TCF8ZXmRZ0wpSR+EUuaD2ZYuydLTIw5aMOq4BMBHt0ag==","shasum":"4c33b52ddfc6ad500032fcd1496be6fc4902a9f2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.2d1b08aa.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhf6ICRA9TVsSAnZWagAAU7kQAIWgQPnvBwSIXej2IHRp\nC3H6cyNlQ/4bssyijBqVKQrqy4i8XrjWZzOMKDFofekjY2Ev0fHbrxhRoGm1\nWnX/eP84Rp0VBkTvApoGOD3uU4i58tM6J6YiLqbHdrnHC1vi9VWKAamrnSd2\nGyDmkSL7eZ9XpfifBro4MQ4FFfUOpS//fYvp9GjIvpGwalIKT+ras+phfAHi\nRQSw6bb4SviiaEd4jQ62gDu7iiIZaNy5xFLJHX+lb79OfNIo0dzaMGguFHk4\nsIXCOH87n1ZbZlzzLSL2liRoUWIVRiOgbw4KahobfwIwu0xV+tcCQ0vGSemV\nf2ztKCQXkqjYMPG2ksQ+Lz2kAEZH0D0oq6paDaNwrZjnQK0akx/xtVBsdxlt\njih92RvkbBcDh3ed2Sp8/0z6SF0zgpLXPRASxJPmsa29fjKVHR3ix3l7W6OD\naACqTciKt8r9rlB5AIJLv1GM/VIpj7WqUy9g7upthyMry6qwKmX8b42W8i3G\nuwI8KJE7lP/w64Ar8irthwfl0AdzlIbCJ621Kfe6KkYEi+wimPzO6E5GIeV5\nRAwKLT5obFBmWad+7/PLAZjP4bMMaSXCwccdkOP9VWBaYJZbFTkA4f9HIm9T\nwu71NVAy6ZW1WTSYo6qnGMCNKRm9EjnRum5QA2ULJsxQQ63LY/bE3EHJimfI\ncQPe\r\n=kDG0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrSsPGh723NnRd1Q0KPklb+q02GwNOHIBp2LYUin3TrAiEA42YMyGORmo3QNfegZJe9v2v0aFHUqIdw/CysT4faCN0="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.2d1b08aa.0_1602616968439_0.7284855730062003"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5bd58844.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.5bd58844.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5bd58844.0","@material/mwc-tab":"0.20.0-canary.5bd58844.0","@material/mwc-tab-scroller":"0.20.0-canary.5bd58844.0","@material/tab":"=8.0.0-canary.790ca85fd.0","@material/tab-bar":"=8.0.0-canary.790ca85fd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f577a3de2e8463259c7e4a5834fb1873a4bced9c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f577a3de2e8463259c7e4a5834fb1873a4bced9c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.5bd58844.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-QHZP8ADpn6ufEDLioT8E7aGuy0YU+n7Rm7Z+PLwwg/+VfETW1pr/ompLBoTIKZO6S6pdtJt7VK1LZtWbgiiVsQ==","shasum":"a0a9bed199e027783f0bbde9cf179673b587f964","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.5bd58844.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhjxsCRA9TVsSAnZWagAAsmAP/0nsDsErzj8UZa2IXt9e\n498Qw+Y0Y35/hNjcfzVQMcrjWc00IIoJGOsBXpjxY93S16kl03Poty1WBAKG\n5y0sKSpOKcOnWtV+PygatopIVGTk+dTIKnjU9idHqQGNw42kdZKvdfBKvlN5\nlTOzZTLxEDaH1CvDkP/S0oRSZo5xJM0LmatW7WaOAB8X5BS1XHqHt2i33UWD\niennbUq4onUDjjK1Q/B1syw3CaXzTL9E9TfnXiV4OFT+zQzhPVy1sjFm6e6X\nskG13t6PTqyv8t6E5uGVZ1wZHJRWRmnjrGtHtORNkUUDy6ME81e0ZOmsckNB\n+Rsh0UTrtV1lQr9cY2SX0cryhpCPzKMECGK9bRCkG/M3Cn2yATBFrcGFE5vK\nTA1lKEEmJyB11qhw++ASGVT47TlJM7vRrvyBgxbMxBRheOaxJwZ9mD4bqrDm\nKxMTlNBF8hNNx7y2HEwih+DuF+RViqpxm/J+Qq1NLmE3v84J4p+d9R130htn\n5jNCTzD25q5Kl7sg3FZ8VU4hf5Pr1793xtUjWUFkIkRWNA9wpAQlo51OLThU\nFxD41UKXk3Z61EoUY03C0yzq3hnenCaPakrRiBm69IcavR4IFPBjC23ddGTh\n/W0ZxL7t9ud5HI00s+d/acLzchqbH2b9NDHeb1QXcIQEN7NkHR8iS/2JUYu7\nUgs4\r\n=aT1t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/Ji0UpnBeyfpfTBtnkyPoN7f+zQZ2TS/9uBt280WMYgIgTDZx8CDkSotZOlzyV3ECBAphXhlxWkkemlD8ZSANnDo="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.5bd58844.0_1602632812512_0.002377245899246594"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bc846b29.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.bc846b29.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bc846b29.0","@material/mwc-tab":"0.20.0-canary.bc846b29.0","@material/mwc-tab-scroller":"0.20.0-canary.bc846b29.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","@material/tab-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"08ef67ebd3aef2e1a1cfc139021dd528a4275f6c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/08ef67ebd3aef2e1a1cfc139021dd528a4275f6c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.bc846b29.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AYbVhKnzRg1J9AkyW9O/czsq2Si6HN1ctZqL2F993XPM0iuruen6DK63Eei2cn02/FKz5xJJi0ayDj1wj4NLNA==","shasum":"d3895843f2b2238db53799c6534df2d08a259e7f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.bc846b29.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfh0B4CRA9TVsSAnZWagAA9L0P/0V07fZT5Oi9NrV6/7Zi\nLomX/GK7eIDLzUEnIpjx2tXI2nJwI5HZ/hwnbh7iKnP0x5pZfAd4XEXXPGBf\nkWnoJEmow4zMIvldjl820NzsiPacFAYB7pQemJI6AZaajFdwerWJgL4kc00a\nj6Q+jDbA5spwExnmu3XA9lyAU/dDDb97pIQGcep8/OizQc0TX4gEblBvYEyh\nzgtmaHDFJS9UvZ97QyDZtc7xKP6PtXo+h+KHECK5S3OnN5Wcciw7nvENUF5k\nYU9Bhz9gJ3Pyugej9oldp1VLPpgaU1kzrSvEXVhtpfkdQLdW5dAI1m15Mepa\n15MEaFf5UGT62jJBN37HNeTn/4Dd5c/4O3tX8zMCD3IH1ofKRODCQmFcet6f\naf7fKhTOptOkx4OHXRZC3WNei3tGJWCoKoPG+cY/svaW8BrWA5Lx4ifz2lAr\n38SIgniWLaCfr0l78ocW8dDURYbYAM+1ZdJPdduMvgjvXembcGoVEbS1skOZ\ngiPFqEbg2H8CI9d+DaU4kxz4+vMlfahIVVyJ4ZVv3TXHluLBHqRB5NayLo+o\n+q5zqOCczlNZjZHsaoivkeA0JMjpSITBek5MTV/v+UuPp/DpWmHfKimfH7re\nHoNDvgca/M3Ew+Oirm/cChizXiKE/UQkCF7F7pdojaqmAsfB3S+5gmsldIEo\nfMa1\r\n=O6oi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcIgMcl8cU12BTCQ5BwaWZBnKR3iinRA1LKL65a56unQIgXUCeHOoEJpcLaaZPTm+dnZvAm9rtjlnxOUGUvK0ouGE="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.bc846b29.0_1602699384334_0.21589495340221032"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3280b686.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.3280b686.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3280b686.0","@material/mwc-tab":"0.20.0-canary.3280b686.0","@material/mwc-tab-scroller":"0.20.0-canary.3280b686.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","@material/tab-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b97a59c2fac8d04478f24f297f15106622007735","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b97a59c2fac8d04478f24f297f15106622007735/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.3280b686.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-1jW62XL4aEKoXkX4LRD9+cBK4k+HZ3ETTxRPhBw+4u1K1Ul5bDTp/LIEdjsXTLELotYvijaXeop1sbJ++qP51Q==","shasum":"6e7786b2622ea94008d9441e333fa748fb807e7f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.3280b686.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOOwCRA9TVsSAnZWagAAA28P/35xzEjzs8AD6Z4uXBVI\nODgSxdLlYsht4uMCM2coHvPrKWPqOv4NWkyRPeIdJvc0O//byl0GMwbIefCb\nQU2yLU4+C+XP5+6JRgYoHQ6DkpguQw2o+ENWD6OEoaCFggSL3hOywV4aV9gA\nWaMu0lYZwUK5TDLGbHhEogqhhtwO3+w8QB4b+5y2QEz3bldSR6cxXHffdyKt\n9tWtMVjIstA17rLMGGy/UwMiBhXPb1apM8x6b99o2gUQswMCboYJQ74zGVNL\nJZwx9m4Nze7h7Nu92sM2nl+Awi1gVb4U+1O0i8IWJFicHN8UztpEKGRZaHdL\nAwQqtq6d5ZjlWzNFpa874a/hVc94M3Y2ER3zBYG8mShAz1IBqqG+otxNGdzd\nNHBHeEgeQZn8+AQDDG5KL0oXPc/GVW6oYCiswKsI9plCXu4+O/goNMsJSga0\ne+hOxeBaXsGFWP/vHiB96A2/JLcoGaDE8mF9AehfYLE1rKdc/oFaKwW+mR4L\nKytQaPaiiYCCcywzvU1b8d+uy4PKLwh1xKKy9e5a3jrIdIGIQJriOxLTbPFv\nOsMvcherVOc03IutPTPk8wvMB0CtjOrRW0+5iUZBWooxZIyOk6J48jqBsuWO\nyUNA5JS+XQuDfh4XtaYzB+rFUxCoggZvM/r2bhy7g8SD7cfxMgipB+smiwJ9\nXs3f\r\n=jDgb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEs8rb/iQ39cdZPCXBeEpU0TGBNHcUJEuEGxlGeCtlFNAiA3O/ZMGrSNgcaFb1vfe3jOlIz8fnHlG9O6PZwjK/Q4ag=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.3280b686.0_1602806703687_0.26504159896236845"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9e94cd38.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.9e94cd38.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9e94cd38.0","@material/mwc-tab":"0.20.0-canary.9e94cd38.0","@material/mwc-tab-scroller":"0.20.0-canary.9e94cd38.0","@material/tab":"=8.0.0-canary.c71ebfa02.0","@material/tab-bar":"=8.0.0-canary.c71ebfa02.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"805fad1d9b182d084e682ab7e59a4e45d40872a2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/805fad1d9b182d084e682ab7e59a4e45d40872a2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.9e94cd38.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-EJZJsTkcp21+KK9zxSmFTEnaH4zhtcmIGmblKvf1+rZLJ1yuCuGFVhmFhcDss+szSG220zc9m86e0vHgwwK9tQ==","shasum":"3561b42e93edac92d3631078d5a297c694839aff","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.9e94cd38.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfig1XCRA9TVsSAnZWagAABOsP/R9SFKN7fp3ZnxdMfg/r\n8xpbFTrV0KOP2UdmmPjnnEuq69P/vGJgB4EjWkJC4Zp2XhU3fDINFb5LWXWg\nSINWjwZbHG8Tvmh2GzJ0uOtD61LY2P6yWJbUlOidxIO99KoJXE+YOuKyUG63\nCQyf7b0xspTu+odA/29fXATT8J5ltYXFDuc94iCKJ7O47QQ8AWw1OAwInFoM\n9B4g14bZRcE3qKljzG9QXA4K6t1asZHYrK3mc9Ew6WyfRTBtbrKMFC6+gzIL\neZT9pCz+7gpXsTXWfwUyO/uUgIR4olXdeESAU5dxEbEDXeEdXbSav9ZbkReD\n1tirO8Od0IyWzbInwPhNhuoxNbEUV/XFa660p3rpGcTKG88ubOrNt/rf+5W5\n0Xgl/yxsF6mlMfX24SaKuF6L45q2Pczti4OUzDcr4JtHJPhn4bsC4MQvmnG7\nFOMnuZSzUOExhQ4+U93gSlozfgQOGJ6eXTx/hR6fojOuHJvzaOL0sXbLsAhs\nKRLALYFqRmF6jdpMwooADkHU9vWoDrGQHjT6Un+1KPnBRgdjNF0QGSlxdT47\ne+JyQ9hlIBKBAEy8aE6kIS3buSF6TauSPaaPmSO7DTKwM7tLmGSmgQOqr/Wx\nOS8BpofisYqsisiuXS3jSNkg/mdjoNgqFfN2ihdU/V1tQ1H2ygojQOWCMvzf\nQGdn\r\n=4S4u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH7zTG3tLLucI2PE6KHDsTqnRMrJrN31ALtNmsYncrgTAiEA3lBc/be6rtCCIiaKXyXXxOLM03K2peUK5HhnPmT67I4="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.9e94cd38.0_1602882902930_0.021794748410813414"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4773c773.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.4773c773.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4773c773.0","@material/mwc-tab":"0.20.0-canary.4773c773.0","@material/mwc-tab-scroller":"0.20.0-canary.4773c773.0","@material/tab":"=8.0.0-canary.2ab716cbd.0","@material/tab-bar":"=8.0.0-canary.2ab716cbd.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fbc8b44864ae10f0bb46e568b25bf4de49eab777","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbc8b44864ae10f0bb46e568b25bf4de49eab777/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.4773c773.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-AKn22xhnzpC/xRnhtRwNMwHRj1xlmKSO3I0TNdLai5dRV8ZDayJBzQka7y4yUmLCLSGCPdUo6/Hc2gZ9m2QIRA==","shasum":"b52cb538b400e4a2431e5b97c676509201bf80b7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.4773c773.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiiAHCRA9TVsSAnZWagAAAkkP/izUE28wyMJSt5UwcDYV\nhxca6M+6VTt6xZhPTvYFQsOjh9ntpFuHh11UNRAkb+X4SY+CiznW3lcH2oTR\nj6cDxGUibIiAl3MNHjJOSJMwWH6XwwjmT2zxM/JwkC5wExjNw0ThkDGobE/g\nIqIdsZr3nv5b+cjO0byRvYSmr5wFG54oGttqDRSW2NWTZossJX0qLkKyGSoM\ncT4GBQnfYYfutSgNQ8rlE0+Pzz0aZ4YeR31OiIBZceBmKIkM10Oeyhd76y4f\n3/UhhYnvMQH3c4/ZOxRe19EPdPmno3J3ygAhaKyuMYyoAYJr+QBHAF5r1HUt\nzCd63yvnoabPFuF95DuQJPkNzWny9pct4xQ2dVquwh89scPPizUtQa54HyBa\nuOg6Hw8rj7VlhoIa2q9UZ//1n3eQVhmUaY8EHG35b1UliwZnSGEviOZv5lvW\naCIh8u31I7YCFPHlZ9ln4YeX+VPzkyM3wm7wt8c/+5SS/0KO2PEQ7x1KOj20\nCEAWCNCpCjeGFj/xTbvPY5DAhXZ4v/IOK0Gp37xS6sKA+JA+J7WpA/N9xVfD\nObA5oDd0axx3F+4CJW9FveA7sMek0dQXINMP95A0HxT3FAGT5EpRTQCfujsz\nJnKkiHovnbhlF6rZDG16pGHzsX1IEd6YnBuHznKxMlyzrtbseZMo0FIEHGgx\nceaJ\r\n=DkUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICiwwQA5eD4IXZHjXGqjUvLsJRCdoxxlqhX6VLM4De+VAiEAlCDSUyUxRU4EVZZr2BGt1vtp5wMtlxNPSK8diazb3Pk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.4773c773.0_1602887687042_0.16719741681230094"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.65787913.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.65787913.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.65787913.0","@material/mwc-tab":"0.20.0-canary.65787913.0","@material/mwc-tab-scroller":"0.20.0-canary.65787913.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","@material/tab-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b21d55977da5e0c291e9fcf3fb992ff4c683233c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b21d55977da5e0c291e9fcf3fb992ff4c683233c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.65787913.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-qfG1/yqLDOIKNDk/kRHQ3PXi/n1lhCs0unBH+iqRHoxz9TbhdRbQ600LWB0urgN2PeewH7Zi94JtlroVNanggA==","shasum":"1a0a432ab97d7dcfde5edb54ceaea71268b6566a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.65787913.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjeA5CRA9TVsSAnZWagAA/7UP/3cqgQCoAhMa65WjBuCc\naZ5dkzurz37JDxZFJFj7Ct9a4idB7SEC56aG372rB+mx7LgcA+zZoGg6Hqk0\nCqo+LGgyg4sJl4VieBRKKdtyNNg4mk+rEIZR/2g//9g4EBay2+S19FJplIV5\n+r1lc1vZxcsReb7dQDq2+ssmnBga9Hu2zv+TfM8jfexstEdDQJoj8U746WOs\n1Rin820kpnWy3u4aGqQDlVGcfb8ijOzZdaNhb4b30dcHlP44JCUdpHCojH2S\n3Sh4UXkmpdOQkGW7U81ParGgg7udMwDSoDge84yASN8JbJapeD7DzzA5Eowm\nfwwi0MQas7xeu3n1HGpR5xT7Ciy3/Uy/itMw7T1lr9Rj7hLDWBAOlxuCY7ao\n/P2SlKO2LoVBB+tgyJYSU2WNd4NcvLCGb2cz4w4EtLqWvyzVoPW3imqCWogg\n32jbqk+XqmMgeG+0bpi7jiwBRd0nFNpokyKimqofsMYoCyTImHKK10c33CI4\nGSAPAQQ1IIfPxf26t1NQlKM0hcQfKw4FQkdlci+5hbZyb6K6U47DwTBV4tEZ\nOxdbrertnZ+piA8ONvN2Fc+whzd9YSFgdHzB5L5lOIaKcCwIQ3jeVeFFI9U6\n9MXeDl/LYUSYfL4LtRrz2USaemtbraYY4biigCEASRQC9Nli016yXVxgzgJV\neREm\r\n=uQ5b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDvo9qsKCjO5YXk8tkBWukTkMw53wCBzJ4nJLBk26PiRAiBSf0KbWahCSNX32oBe4cRKROS4yrzFqP1rLfpqDjlMVg=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.65787913.0_1603133497462_0.11831629728947801"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5485fba3.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.5485fba3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5485fba3.0","@material/mwc-tab":"0.20.0-canary.5485fba3.0","@material/mwc-tab-scroller":"0.20.0-canary.5485fba3.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","@material/tab-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9648298c6a3406f312222d0c0949954cc1e250e4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9648298c6a3406f312222d0c0949954cc1e250e4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.5485fba3.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hC5K9H9GuH4ISlzPG3Z9N/XhdD2tWCdV9YrBpVUItAfUKnPvExqlzyDKQchiuwUgfE4+cRerE8w8CYlJ64C5lA==","shasum":"e1e5bf64ab47bdd7df94e7dbf22c2b25d6f2820f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.5485fba3.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjgQjCRA9TVsSAnZWagAA8RIP/1ipqxdUd+TRzVmTqVhS\nzj9Kz0sgApjnUnHux52SShEcJtxL+zd5/QqYaVccOoujxSDWDBqX7CEqIw3d\ngsltmQ8FEM7ObgjmLHeMk7icahB/nJKdWl7/AXUP+Fd/9Te1UuBA2/NA54lT\nnJ+dGhVzDKBCbIOTUdNxtpwebCfSQLHiE8wFPRzcMa5lRs8HT0vEKip9PwPT\nRdSbxxToR4zSRdAkS+WPO7eKRwVn3C6sibo4446G2XKvdCqT3vsimBhGxNQQ\nHOOEHL8+BIfwdWBaWpF4099e5hWEVjnE/YH/noHd2ojnSsEQfgzmns1u0zuT\n4kg038ViCiVWgUWo08FvBooD/9w2EBjVE8f5hy0zjf+HvUUfM//aO2sbkqch\nZmcmGT6oUAAI7/ddv4HXv8vY3cVi2bOo6ZFuxzedELvadZ5QNRa8/BQ1OQkq\nMaX0i+qpjwHhpOup0eAIz0TOdz626ZesXI1FaqFda9RDcJ6wlRi/KlSAVa/X\n3WXh0Ah8nEN3nNUXMwiZLbPZ+RommrqOwcypRVAeypOEUmffw2T9XsdyU8Ui\ndto5V7I9WUc/m1cjQygd+QMX/YlxdJoVwIFM2tVYo5NW41VbRas9P5UIoVUK\n/Z744BE0ZMlmLSl7kKddUU16wVghxvnHEkkIIOtPc5AKsrZUYTf/P8FXOFgg\nxtQs\r\n=y9T9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+PqQ1SXtlKj3BAI8F9D75lFWQro+W4QyyYYdHxHV3EQIgAnzT5ISonTWrocfjY+lsXXkhNRO63rCvMVdUIH20oFk="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.5485fba3.0_1603142690816_0.8837406611426644"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a39d0a92.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.a39d0a92.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a39d0a92.0","@material/mwc-tab":"0.20.0-canary.a39d0a92.0","@material/mwc-tab-scroller":"0.20.0-canary.a39d0a92.0","@material/tab":"=8.0.0-canary.43c1c5e2f.0","@material/tab-bar":"=8.0.0-canary.43c1c5e2f.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c523e6fd9acdd92ef501444da567a8910ed478e7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c523e6fd9acdd92ef501444da567a8910ed478e7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.a39d0a92.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-l+CvBYtNJCxbkeKrFraU0owY59oAXfKJ8jFtJ/gIeY08a5242Dtkic8NSLXSdU9a957WJxA9+P6vBsTF4xdoQg==","shasum":"22fd3e2913977ff3495b1e4c401fc9073af1f33d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.a39d0a92.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfk0oNCRA9TVsSAnZWagAAhw4QAJeel+NJayt1ll5lWA8V\ndXo4yi1mqgDCZTrpYOLfGQnld5aqbk7xoJCSbghz3ppdE39oEcZw+02sEERZ\nmbCUPcXu/xspzvcFcUewIuN/gs8ZNB8y7AwD9LgA/DRICyMJZGpsLtT6gBGL\nvCvrq6XiayGZ4G/ddR4wcJQq1HVFCpjHZC+u2hlu5XMVTLKf93Fq1T+MaWLX\nRHmyLrvHGwVnO9iQvsEeejdKHr7NUy/v8NyeggS02zmwnQv3sVpvPTnd00Ov\n7FTC1tS4AEJNST1adeQkPb8eHx1RMIC7CdMk2CTSDz1oVrGORRM1Wv3N+IFY\n6J4fCXqNZNh61KkIvU5NJwJKhkrmxfCYrp1x/HDVZ0n1iUovLnLgqlGYuUQF\nLUPYRJqG8LknyBqalouiMEfkQzj1paIl7HvB1O3QgXlvdN3QgW2LICN22bB0\n2Pa5KW4565XL+W4S/WW5PVB/M+9+67hr6NYq9uKo0Zvq5YEJf7HrvCAUwHsc\nRMvs3oei/R//wC7RsH9IQMYqo3tDFRbPE3ZcmkFAaYN0kFqd6GW6KrOQVl6t\n3PhukymkVph/9Ra+zrH+NwxPIH6Xdi13sqogka25Wcrkk57FCPyjC2i+9OuI\nd9vSc6S7nlmk50106aN0E971moM/j74ZAJ2iXUK+AwP9nHzBWjzeIlPfBd0Q\nK5ci\r\n=+gfF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBXSJpQrUhYT+4CdmcYNsqU+8NCyfI2SKGVfWrjzZCkSAiB7kRgaaWy3vIthtsp2LwjbPb+p3asNXtatR32LaBmz4A=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.a39d0a92.0_1603488268908_0.7770240119166525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4eafcbc1.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.4eafcbc1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4eafcbc1.0","@material/mwc-tab":"0.20.0-canary.4eafcbc1.0","@material/mwc-tab-scroller":"0.20.0-canary.4eafcbc1.0","@material/tab":"=8.0.0-canary.ccc64eea3.0","@material/tab-bar":"=8.0.0-canary.ccc64eea3.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5be869d7cb28aaf425a4fae37a4f61d918dc1d4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5be869d7cb28aaf425a4fae37a4f61d918dc1d4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.4eafcbc1.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-seiHS+RoxER8/BwAv/7cwvfIi7u/dRp9vWkk6ODlVP+hD/M14WTTqAOxVAHZVomBVBPhVMtjHNm7iOZbAjULUw==","shasum":"d834fd9ff9480603f6c06b6ec7a3968dda46d27b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.4eafcbc1.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl3YeCRA9TVsSAnZWagAAXtIP/2kpQSuIoevWP7lCmaXe\n6yHD+zy5TDsqdU4a6C2UBJZN5soEdPnD4NXzJjMLS6SvGFV9ZeKNLg/+2Z2a\nOPMuxjaIBIzsIBUUP8A8qp+YXlBc+bN15IgDfTna7tYc9qIpORuUiFBi5EeO\ntrpPwPw0CKySJT3nt3pqjkv4Wk2gKAQjBtvJrZdUOTci/PBNsWLEmNyQVypt\ns62KvFBRuyUlI+yyToYrNNtA79s4egNp+VTsTRFNeSVXRiH6MM6Co19hi/SP\nROK3e3W+e2pjTU1OToUAgg9bRy1ZshrvERyc5nXjVXWPfrwAN/k8E5+rMglZ\n11xyBu9QTXcnMttq5QU4oR9s5yJBfS1b1xK7ABHqt/ei9chkvT9pcGMaigF1\nOaBBLIxcN4NdsJlbBBx1sreUqVW+5BANESR3B+SFzhWhRZMHHnKUUvLv0E7u\nT3iSNOoAua76i+h++Yl86pudAfKS9JLeBVcV0meK5bM1U/buhPSr/ZsKLidW\nfrnhMVSj0lp3vBFgyQUsH7YZUHWa0pZQWzz96KUopOUOdp2H/B9ki0g7nJ7S\nwYq00hKYsvXHPA7quCv4mH11AjZMY/LpKybIvrvdnsGAQOh9eZL4kOrFEihR\ng+Ic0kaP/EoBUZ7WbcyIsbujYexuZrDORg/KZsG6haG5T0WKPKnuaSX/uHOn\n+eFN\r\n=71Cc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCmAZFZ9cA0bJn7pPvgMNtyXf8V6wy29AG84uFjLy82XwIhAMQtIUT7RFQx9JQYo6guM3FozGSLL0NQC3iIwEmb8KuP"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.4eafcbc1.0_1603761693594_0.07595754282922629"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.32961593.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.32961593.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.32961593.0","@material/mwc-tab":"0.20.0-canary.32961593.0","@material/mwc-tab-scroller":"0.20.0-canary.32961593.0","@material/tab":"=8.0.0-canary.a79cdd019.0","@material/tab-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af0d60d5c2174ff8ae5098ea73212398be59bc74","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af0d60d5c2174ff8ae5098ea73212398be59bc74/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.32961593.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-aclbgg5v6iRzNMINDATbbgdmNFtDhNlZk5KO6AV9B97Qv/6CYfMfJouRSy5ZMUfxG6vj5saaU2XCyifAhPnhsg==","shasum":"b0e818a210a8f4723ea0604fa9408479d4161064","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.32961593.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmL3TCRA9TVsSAnZWagAAbYUP/jwD5CmpR4MbGJD7xQ8b\nb5fKEzlANGv9uepkKGiLsT+qxUnHRH3U3CVurQGDUuTxydGjw+TNM/zl/Ojl\n3d3w2unxmchXrVwEtxrEsEZ4Ku7rPTWVrhPu6aQQ8NykZNuVVwwquJbp2O9Q\novQU3FQkorICvl0keTqY87IKfeDAB0CQEhDoEeSkry5I7eG500Xagjkr/cW4\njTOoHqcnGaNGLoge+ekTckOcq3Gzxjbao8ZneRXT3p+e34714PpdUR6C9J+P\nhmv2+JsN6MOqhhGIFATKWki/ZDKES68KjNZ7R/476NGrt5PKAAJJsazV4hBH\nB4G2kdt+47Bie/vxL5L2LB+Lpq4L3SIbhYEP8GT/u6hRySgsjIwhZvKK0BVP\n8rqiwbNoNKVGddP/din/J+pr23PpKp6QvL/bWhPmT2Kg+JP8WrTqg6Xbtads\nEv/e+ZSXVpxGTEgA3NY21A4poDuXpeN5XXYyMLuDtcs27IC9d7daMLbukKYe\nHfAMUBg4JXESUu7BciRNPws40mCqzYvQT6+7EUdr8NOcjsAiIvRyPUJeAbg1\nGF0sjwr3LYR6Sm7rntojNEp1n1GuwIj6/e+D6G2F8moHYrVkZwK3pjQTsN6q\nxNohWZDMadDR9MeodRH62x4/TQwu/hUxsDB3lKU4YIAycJHKBR3EcQUF2E0A\nyqUC\r\n=neLC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICVaRko7ltLS3by+EHctx/ha5PmNgljknALmHcC8xhVfAiADpLBmi1YrUy5ZWMWTJmzUzQcDzPRSxSVxlSaVUsDZMA=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.32961593.0_1603845587067_0.5108449084985831"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8e3a0601.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.8e3a0601.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8e3a0601.0","@material/mwc-tab":"0.20.0-canary.8e3a0601.0","@material/mwc-tab-scroller":"0.20.0-canary.8e3a0601.0","@material/tab":"=8.0.0-canary.a79cdd019.0","@material/tab-bar":"=8.0.0-canary.a79cdd019.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a21493f177ef3992fcd667ec3ce774d4fc926d7a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a21493f177ef3992fcd667ec3ce774d4fc926d7a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.8e3a0601.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-HtnN83Pgh7v48Ro1W1Z87nDHqvhowPeXab+OxYh2xpANPdkOldF6KdMhR5PoAvCIfulX3/5fq+PlL+1/IOd8GQ==","shasum":"957bb2e3ac40208a9a901f997cd8e0247c62547f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.8e3a0601.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzYkCRA9TVsSAnZWagAA3JkP/1Vywn6XgzWucDNDS7cm\nH/ujYUt7rrh1xpIEkKIWrdEOPZuH4g3mjGKzipx8bAyaWFujVfHjNminbK33\nRSs4058D2GFH+RH8Bzg6eWsBgTvzsvh4BbG+yj/bSYagmMdT42IsGlcCDMIl\nuL6H+sMwX8Rmo2W1+NvXfBi+4GnDe15CbgJd8m8gBqzwzWswt5c+HsMKwkwY\n5MyYl1eFGQR3kcJlWFeR2LITugGevahHUxSVHoQGDIVGUgFutjQBt6dpaebZ\nplQAGOpAXuBYJZVKjsbEO0fCi/ZkISX3u2s3lnRC48d/GJ7lRCgF2Hv8izTN\nUAiU8SjUlwq2BZFYaah4srEfrhz//293soBtyJqNqzkgtH1pTy8yvN9CNPAT\nEOcQzrH4gl9Gg9wiHpSuNzsPAETWkS1KGAcbMaUba4018yENfxxZM1ttU/Cf\nf1Ize6boTUZZu66d971fV4qgilsCLLRCm+ulwEflDguDjm4tU47eTIbwZWQ5\nHEwqcJZ46E5mkqUVdJACHL1weUOrl2MgRXpBRYiDlWUwMLJO+wfmUlYc35LJ\nP+g+YUnme+sU+EY29e4NrcTmoafUWvspJJemfwbYfZQ3sJ2/rFnzf1hYQRiM\niJ/z3jrQrVgqGZ4CpihpjDPdws63odWf68cehOUDx5t25kxcMZAX0rxhKXVG\nxgXW\r\n=9jD/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID510iZDU86jXX1cecvY/yQg+kSmfVlVIKFzm0cooXyBAiAaoII9gTnW/2U1MvAocwVMBOSySOmlzR4eooOww2OBWQ=="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.8e3a0601.0_1604007460427_0.3848049138236951"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.178c25b4.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.178c25b4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.178c25b4.0","@material/mwc-tab":"0.20.0-canary.178c25b4.0","@material/mwc-tab-scroller":"0.20.0-canary.178c25b4.0","@material/tab":"=8.0.0-canary.6d9648ab2.0","@material/tab-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"80850b707414fb51c8072422d293bc7fea8a6d8d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/80850b707414fb51c8072422d293bc7fea8a6d8d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.178c25b4.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-hCSDDOtXWyI0DkingBXegLa+Ajk9lQBzA93Dy8HfV02RrLtehJ+U7kgLfY7P58ZuqOTw+cQiQVW/DJDYxbdDdQ==","shasum":"3305e4c49533485e7e7e795f9f8c9be61e8cb07a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.178c25b4.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmzlPCRA9TVsSAnZWagAAzI4P/2Eepkfdn0Cnoai+ubbx\nyhQ1yBDsJulRfakSL9sF4KNs1vKen1YRq9mFN1ZeWP4wu/CmKDmxQkftcQEN\n1kLQQ93FrxwVVRCIjnwFMgSuMotG1SOXFFfjEOaectHChqJ13EhcOCQr8vBw\nggdlDBFR38ryKMvylY+PnjKxRZdkIiilyskrHdX0KOEvQezZXGrL/k5i5xEF\n0IsbAVp+3AYHRwaimVUNtwLPAisBmHbf5DnBBWumVwPiUMTn8MLJOfV36Fz9\nCangy0/8nlAYNX7ntQwsURCHpAXqBABC461+886QpsNHT85+QVJo39WchcHw\nRJRNQvv/bIQ8A/4+c9bxNV5hj7H3LOUTdRC5ec4aKGI1UsRTslnhbwmmB9oT\nDBmmGGMe0RZHoMURmHjsv8LPTF/EamHcQZjo+pfhavbWvlK8D1KFqQPJt34R\nxRmcL29rSE0DIUGUcgKVFLzKhKPiX5NWoBAtdj7T8yeEw8u79Y7g3mvHdo/L\nUXHPdSVn1xbmQe0k9AuNDwCmrJhhzzAWbXr5EC+ktkJuNKMDU9Ti7hyy5qoF\nwQ4GIlhQvI30CKh9zNBAkD+0RoLMCDQEHs7uTP8tcqpGoH2BhTlajpeH3tKU\nNyi7kGQ31DzfpYnEgSOp906koUeflZk+gKnuRL7TbXHrqeeWcX/ueO37DRZJ\nav7M\r\n=JEoI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyBWgvP/3WWh+fCO9Fg2CCmu18Yj1EzxJzScyzppJ5tAiEArXvcZ2MVHkIt8IjolRMqL7EfiRX5GvLPm+7NYHbD5JI="}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.178c25b4.0_1604008270846_0.9909150239826803"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.124beb49.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.124beb49.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.124beb49.0","@material/mwc-tab":"0.20.0-canary.124beb49.0","@material/mwc-tab-scroller":"0.20.0-canary.124beb49.0","@material/tab":"=8.0.0-canary.6d9648ab2.0","@material/tab-bar":"=8.0.0-canary.6d9648ab2.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8d314226afe84cba75086ef952556fa1fc0c5de7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d314226afe84cba75086ef952556fa1fc0c5de7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.124beb49.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-8Ag8m1BPHvKLBLwIBsHJaw5ySjfBVHlhbotSg7u7ASda1M/lKQCVgt9LT0IjIS1Fia5a9xl1pGqclCh8lAMNQw==","shasum":"71031498af8e7534f494c0d6ad91982e18987916","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.124beb49.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnKqrCRA9TVsSAnZWagAAmBgP/RX/SEzKl3OHiJReH8TV\nJ8Slx6SpGkZ1w9cKU+RaNWZ7LAy/ZoEDUIJWse+G/e/syYlimG/FAy7NAeJn\n2RwL6okLnHpiOKwwdIDpbdfaZ9B+4ga7mXvTc41NbrL9PYjRN2reIMHnhidB\n8OO7aF0LheidxHspflEk6EiWUiRjK+cY7znLvdKeH/T1vAaSoWt/CSU23YWN\nOnmvDbV9dlKl87wGB0lBdCFhAo3td2ERfuhkrqrlQQtxtB3XJ3qesI0kTo3t\niwPTIM4NEHHtlLDSSU57C5SwPgefnwGfw40J9b945trtzMEKn54mB5JSrV3A\nV1vacBKT/jVK3CjrOet216opTwgr3JYmTmzZ1ssAo0o1AaM+qwazHDZRhy+N\n5mSJkpr0c1Y3smrXGAOBwD2MT1ZOiwN3h6HHi/YQmmyymW9hoBaWWi6CPHih\nabDqiBE0d3/zxGV/vHCvuwQfZdFXyARbNGl7nxywhYSLHbx0pZocKEiG9Nmn\nPJrG927f2O7ZQmGk0cUcU8bHzLSVxThTDNzFD74n5SAdE3FDAczOuoIXhdAY\n+xSSjgV6xfrmN+Es6+Ez3ma6SaUjrwJ04OEhYSsVTxGzPEE1WpDdJSFkAQ+Q\n9Vwbndln6/1PhWfAwgDaHoUQScZFmiRy4TGZFiXQphZVvzKvH0oKZoeDP8ir\nBo55\r\n=gQ22\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBfD6ee4NPhX+xEkO7YWr+IPWo8mrIErnI9IOv6Cq8cwIhANDVdpp62MJI6oDmAUkRWDIABJw6aSnTjbxtMcmO1QT5"}]},"maintainers":[{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"aomarks","email":"aomarks@google.com"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"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-bar_0.20.0-canary.124beb49.0_1604102827058_0.8922599038211523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.5937f468.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.5937f468.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.5937f468.0","@material/mwc-tab":"0.20.0-canary.5937f468.0","@material/mwc-tab-scroller":"0.20.0-canary.5937f468.0","@material/tab":"=9.0.0-canary.d6b5cd418.0","@material/tab-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d1d2934f5269407a8c0f85d5112be5354c17a971","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1d2934f5269407a8c0f85d5112be5354c17a971/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.5937f468.0","_nodeVersion":"10.22.1","_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","dist":{"integrity":"sha512-GKzZMiJ4X554IRBRFBhdXXeso0WJCNoDX4F5ZuzU2Pb0+EFfnmxjISLvSSB2Ihhx3pcDhX/RkWSHXMNRlbjeAA==","shasum":"ce766c77226587245bea166eef9c5f436cfbe1c9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.5937f468.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoxfYCRA9TVsSAnZWagAAeyoQAJK+hzrnQiAchuTB74il\nePE5+vPybQdM3AyFvCFXJA3i/J5rIwNcwq4pkBKA5hxnlwXPn6K4fZRtRsvq\nMO5TONyow2vakhKagWysjZmb4SD4g5KanrTLPgq6YsyCVfU7rMtjU8U0lA6y\naVjVM+oEGB6xiHBeQCdxxhjmpTxDkm6ZLj4lmhBU1/+ApMZedhV8B/qwhi6G\nK8RgHFuj5de1+u0j8k+J5IlZ9KT3s4c1Vg4tam9ykdy/wgnwpiNcO01hTnU1\nNiWQ3RxDu2jke1keFApu4ADTyC93MQeYbFStx7a0s/K0zV97yfeKE2KpMg99\nQIV55BTY6RejcCStbwEp+nTH9XIIq7zZs18MFb+56tooSA6F02jtu6BHFeMd\nLDziHhRY7WEfP6uzelUjFXuIjf8bKKUpXMXc5EXSDN2Rbu0maJfaaneuFB26\nIyZRip1hPBPHL7IexVWoo7HSV2ZfgS0jVR2ItmqTruxJ7XNz+BXrlH5nUr6u\nIaJVaBCMWYTHFXmrREuDbTUvUQxwI6fVN3a+w7vZ4ocL8i0tBmSL+jNjILso\n+LiurmLvpBi1GBjB/xbNdo6XgLp2fgemziUk2wI6VQupzRSwhZ5WBosfrv7a\nWUurKu2Sp7Nvb4/R3sv+WDDBI5xsIs0X6CNLehdb9NeSiGOIhwkmb/5LKFC9\nRXmB\r\n=nQNF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9/KTCBcMO4LG00OO5axAc2tr0Vl/NoRRoRRD4nkxAuAiAfwmgLxNupCxAPdbo/3r7GwGNHHywLdMjx6VGN1f4H2Q=="}]},"_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-bar_0.20.0-canary.5937f468.0_1604523991813_0.6312321151140052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a9bafaee.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.a9bafaee.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a9bafaee.0","@material/mwc-tab":"0.20.0-canary.a9bafaee.0","@material/mwc-tab-scroller":"0.20.0-canary.a9bafaee.0","@material/tab":"=9.0.0-canary.d6b5cd418.0","@material/tab-bar":"=9.0.0-canary.d6b5cd418.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"672dd0ebc89e93768abf9e9fb4a31fecdd7873ce","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/672dd0ebc89e93768abf9e9fb4a31fecdd7873ce/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nNone\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.a9bafaee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-cjSXx5ZkDf5KC8HFYLNKUDswu29tSJomQYn9Y3GMadMAGkuG3Qp/LapXSM9U0NFGrw1vrqFYVRY7JSslmJeC7w==","shasum":"43c106c48b052f194391947b74304c5a9f2b4a50","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.a9bafaee.0.tgz","fileCount":13,"unpackedSize":45610,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpH05CRA9TVsSAnZWagAA6FQP/RopvlfCEz52RgQbkKmP\nlAIyHE+SA5SpTnmLeHCPXJYmBTDkovhgFuULlcZDPLqGGL+Jlu5UQIp+cza2\nyCfv8YOKKq+Mus+GISwgRo5F8caRFgxVLTKh/Ln0Mr5AYEDgYWKek8ZpRKh2\nMKy7amB3J9+uYtEK55fxmKmiGdU+H6kRuEdFh+oVTu2G2uMkxBjRtDXbtZOc\nGj1JVbbKAA/QX3znvgT9BW8cJSy/tJhrISCdGC05MKR8RRBnYkoW8fOv6GnF\nZWuBJdoy00qnP8awKDgko2YxyHsKM839qvNGcSyY1zOtvAx4ZUrq4icE5g5l\nXj22XdF9EGzsLrl4PlvxOyQnLANFh0pzfT42aNIqBCj44mclHdGj2DNQr9Pm\nB6eDbTMc0UJC9YsUcrWpz6wTSWet4kpOgg2XbGYw1R1RbQPMDmM/7HFjigij\n2kjbKwrciH8JlSZYPpcfUy1oBsuoSILaLpfYcExyAxU7AXlHkH+I7wMgeyV9\npNq2pf66WLR83AclgHZh7cQ/CpHQYqiqnrW9hpoF3ITVQV7mtZ358skbtkTP\n3YZ3tUj4XjbbSUTmWnIjeCTzhj0MBUojrQb1l3WdDHHytwydGyLO+9tW1Ffs\niRPpoUjOBPGpU+bcasp8h6L+oa4huJ13uL9nrp8lxNDmcedg2lk6GqZAfaQ2\nh33g\r\n=bvwj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCIDW99mhRFx4Jusz4HewL45W7n44rJVqxiBGDio1TnIwIgceVRjJUN5/1P7oomDo0eTB+rDClGPKpA9A0RnPAinxY="}]},"_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-bar_0.20.0-canary.a9bafaee.0_1604615481003_0.06426107494573996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.184861ee.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.184861ee.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.184861ee.0","@material/mwc-tab":"0.20.0-canary.184861ee.0","@material/mwc-tab-scroller":"0.20.0-canary.184861ee.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"292f005e510c59c9b761c4120c56e8c9854e4595","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/292f005e510c59c9b761c4120c56e8c9854e4595/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.184861ee.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-H7aNJX5B7Jm63/nv+QMmk6NOodbDXzq58SexkWgjWVYaNxGgFQDOEIdSH0lwoDXV/qkASN/piw/Oa/w4oAMAZg==","shasum":"225dea864ef6c8cb24da745fbd6ce12333594bb5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.184861ee.0.tgz","fileCount":13,"unpackedSize":45757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpex5CRA9TVsSAnZWagAA3n4P/1iKQDwYfNeD/J5tPMeP\naB+KWYzrHJIAeOUz7jM6SVV2XZFlLQsNVXlTd6j6+IJwPKYnY84cutUeoDvx\nXVthI3nppvWpO/i8sDoMWdl4m8DKbSHGGsVw9vgNU1ZzEop5pU5eKwwQ2joj\n6FSXTiE1o7bvMSIQeC01avbtBO6UBm7xX2RdRR8ca/ZdiasvBl1/Mc3aia7e\nLTESnTWDiv5+dE2rCig93MbrEHuLIuIJAvkvzxNTzuL3CrEn43TRE0gqlfAA\nV4dGFlDIeTw7oc16FQxK1GGo1CVZrcq1PLL/t6Eipkwwjnup32iPGAZzMLWH\nH+DXU4jmEeAaibN7pmz0tpkH3JIgtskqdC+aOotqWjkXaWIZYHwooa1V4lzm\nb5W3pWn7lK9QWIpUj/8Ypia742N/bFc4crB3zrufBwBqFG8UtEoihhJZY2GN\nqUKbUIFHgM1oRo4xWSo8QpqdNu8Kg5xxDR9NjdXFogCsdhhPJoE0ONwZg3ct\nwAPieynEr4ogDQ6mBA/6gik043XxNH7lbTueeuI0GZnFOFqTgKf5FnITlaOf\nC6qoYJqI21shpPMs5+5Jt0qjsRQ5g4yiT/QU4A1a6tiETOZmWl686wvPqtvT\nQy5Qhtv7lC9kIPZZwYhxhyKT7L9SlAIxzRGdeRklpCrqCg0R5qgnRZC8V6dj\nmtVA\r\n=4NJ/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCp+V4mVz7RxGbx1wjXukm3C3DG/horuFdf3JDZoWwNBAIhAOtk8gJXX8QNQL/x46SQgcqKoIqL3QLjKcBQbWaAoLgN"}]},"_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-bar_0.20.0-canary.184861ee.0_1604709496735_0.6165742861237269"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6c6ae2d6.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.6c6ae2d6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6c6ae2d6.0","@material/mwc-tab":"0.20.0-canary.6c6ae2d6.0","@material/mwc-tab-scroller":"0.20.0-canary.6c6ae2d6.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"38ecce3da3f921a8c45ce342e47456c702623761","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38ecce3da3f921a8c45ce342e47456c702623761/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.6c6ae2d6.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-bodfoR/3O0b7/Cc+InRhepllr0LHvvbyTCiBdD/k8HxLO68gEqGQq6HQQOmtllV9zQ0pAqXZk7+klTYKwYu2KA==","shasum":"3caa0daf200a8c38d4e374cb8fa1db51faaa8637","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.6c6ae2d6.0.tgz","fileCount":13,"unpackedSize":45757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqT7UCRA9TVsSAnZWagAASYEP+gJ5mxgXoMMHytuGdeeI\nae1q9/bb1kWsXNA+ij9do05dLP2ebzITEF1Rvc3WYNQb1CUkeBEEkH9j3ija\noThLE+z3JYZhu6uBQuC/nTVgJfwDRmEbI6WJsv+BlF+S/vT20l2SylSQRovR\nsCn5mRVjmACdW838UfwHM4d3hoaq8vwNmeOJfNjsgRNNYGcHO9aHfYmiyQC3\nLskJiMmtgawpWyUoduQ5Iod4MCK1Q0/SZuJxU4v2pPiq8j3bAFHUkdySq9rb\ngLHtwxbHry5EFOP73NNRQjbSGyykdIDqF/WFdN+GxCjp1ZSkOzyN9tu1pURc\nHgzHMD0MCR5PoMmbacSAMrofywWCkRuDIfOTdWqtc4RqecPhcyP4K1feFtq+\n3f4d8pKxYet909QCN0ryds5ucC3SnZGXFftsd1EwHuBXYXZyj+R6U7QdxI8Q\nr3Nq80G+xZkdcBGS0Mp8xdRv0Nl3p11XXAFuWW8PWrdcoFg85edkjrAqLFiN\n9M3rghtdDBeJmz2NyDyVQ1BSIBdDgIxAuxsJ/vMs7ews1GzH2bTgc/ZHZbAe\nhVXvUZheYVP8cGQVoodf8SAhWSyhHxKZmkn4Fp2PgeKls0Jw2ICfzuk1uXXA\nxJuBBj7HZVLqi99CBX/Gyu0zCiuXbY6pcjy5+62kl8hmmbyA389KKx6xGHz4\npVlZ\r\n=12V1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHIxJqaHQteh8ucx5aJNgsKVmN8yIad3ZeJLkxpSVXUBAiAPg9nutx6t0Y+KdH4PB8/z/Ax/383//Pu4lBSDQhh0Zw=="}]},"_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-bar_0.20.0-canary.6c6ae2d6.0_1604927187637_0.8800542595208121"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ea2aa477.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.ea2aa477.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ea2aa477.0","@material/mwc-tab":"0.20.0-canary.ea2aa477.0","@material/mwc-tab-scroller":"0.20.0-canary.ea2aa477.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44e884f1fa66508713a0632b0fd8052b5a88aa77","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44e884f1fa66508713a0632b0fd8052b5a88aa77/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.ea2aa477.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-p8cGczh/NWYXQSQfS9HuFG7g23TQkKdFAJofCwkce5zGjdiKdEDFdgSIYi2NDIWA0UXn1hz9rknEi0bwAUUpNw==","shasum":"1f696b21b22ba59453479eea24c8022809e066f3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.ea2aa477.0.tgz","fileCount":13,"unpackedSize":45757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqde0CRA9TVsSAnZWagAA4scQAIwcVSsDkuYgHEzd9HWQ\nfn/2Ge4hmOPqUxb1anVejMH1b8ntAAPe67Ls8RmLRkhWm6j5k+TyWGgKRGsG\npxiCO9Bog6tzMqSl6qFyrNlyYjhq+nKgN5tKVcnuOkbJY4QFA8iG2dMVC/sQ\nmbpTs5Xbnz4aiUu4vVeM9hxVtwr7T6Za1vtThamnysPTfD1EmXp7Toh0txVm\nRgGQIsLgBUhdokRwfxGFqrKDqsKo8/9kSw62ahw8T/KV/vhz2GuDI47nm9HT\nTpIGXfLruVLF9cmOt9pUDiHxHBgx8nd42lL3mzu/OroT5We6o0d/4xnRsPvq\nS1aY7UQ6AWTD1fhK5UB8eUlEZzoeJp/szui+Fw6I4uUNJphPYC1r7MYlL6Om\nLm2CNQwDQM18zuO/DuO6JH/gDpTbyGYNCjaaZqDNZq/Eb3kb0ShOLZWWujXs\ntHRMhavR2B5Sa5Hm5AzuPrd/BJWQoF1yp8qpDuwwv0Sun4eLuoRlAjPRMuhL\nLU0GIEqpCeulWTehz1TCO15khPoAYz7vjcKgMuibZpOVwgpvF9XfIzbww2ci\nB3cvwdMgMNz59tzjKWPswMOmTBI6DKiHu9cnphtk80qTTNBEn7Y2GZdOyAEp\nuTjuyyzEEYZZXmqcdQd2B/WGJG+o5Tp823dhaCIHBHcCuZ4oDosZ3q27Q+oJ\nznNU\r\n=P4h7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDAw5ycLAF5PyatY03pnLOOmvW+iZbc3M10wYRfwJFOvAiEAl/hNb4MJsNSqgRxPBocdk8LJuiri2fBfwxAdwjncihg="}]},"_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-bar_0.20.0-canary.ea2aa477.0_1604966323690_0.41010949149324527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a2c088dc.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.a2c088dc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a2c088dc.0","@material/mwc-tab":"0.20.0-canary.a2c088dc.0","@material/mwc-tab-scroller":"0.20.0-canary.a2c088dc.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"60aecd658763ef0aa8ea8055ed91f03f6d3697fa","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/60aecd658763ef0aa8ea8055ed91f03f6d3697fa/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.a2c088dc.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-U5Pymu4nD3OLDwcUfEig2UrXBWEvtVSMdmdYV97eIMLb2yCzzNGYKzLm8ra+K4TPbszXAmHVCUtMoQwZHnrbCA==","shasum":"229120f036039df61abc676ca2cf52235f70794e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.a2c088dc.0.tgz","fileCount":13,"unpackedSize":45757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfqqKzCRA9TVsSAnZWagAA8OMP/03vucA5NwcMsspylHkY\nVB8KIuYc8LLrs2vQWJ57dSGTnjbhXV0sB9BpvPzE/WyHcOIjwJeMkj5EqMDD\n+8MCFAsTHfRxWepl237WMqxMlbhf0LGUEWSDLIEWpjbcAn2AhP8fXT3Pj98P\nwRSmv6q91mQ+EXHIutdkr+0Ozs3khoiZylT4UEPS9KrM+voc9c7YeuCT7Iw6\nvkkJMuAAjjKdsd1M7b5ufR0IeXzZTFu7E6nz8V0liJkGVjWWxI/FJcn5RF1i\nYXVxFHV9qWDpWsV95eWBDV0RFfzIwsm4lB4Pbrrjy+R9Rg05MANT4EoRXz3N\nzyZgpJL0UFo57nXYfKrfRqoHIp5YihKvJLGP6dUgq0ya0/YgHx8MzE8VQFQp\nvherd/iphGvXD5wESTSA7s8ZJyKKGtW7fdi4CAmyJj8uNlN/8BoFdcfJ6L0g\nEZjs5UJyzUZiwn1BNonIzWWwkaw3YjpcwZ1KNrzSFKDbnc3ap7Ogx+optT8/\n8SCnnZNtlIZfu6Ot6fTEDVzOHbGNi22aan3utKKBY5b0xFLdMYXa65XSUnjo\nsbP7Ie+x+O5/ZnxnXGqgAxbTu96JOAlnBG5jd5asINUT0/4zBNVMbiu9/HhB\nTEpE1vSp876nEt25vV0gcTkgbKevL4U8DmXYjupAVxC7zwCrRNAu0QUsGmMR\nq1SS\r\n=S+Mq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC41Gegvz7XKYILCUlMbxcVBAF5b7N3yF1r/OoLXi+/SAiAKnIs2mIdCdCbRSe33dtQXiIp+mgZzOz+nc6Fb2amqHA=="}]},"_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-bar_0.20.0-canary.a2c088dc.0_1605018291105_0.6240094254092261"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b04d71d4.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.b04d71d4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b04d71d4.0","@material/mwc-tab":"0.20.0-canary.b04d71d4.0","@material/mwc-tab-scroller":"0.20.0-canary.b04d71d4.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^1.10.0"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6c9d3a1dee5f50ad7d82b0f0e59f7c21d9524452/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.b04d71d4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2M/sPMmkVtn4YBQF4PeAjUOQ1rI7WsyD5gdWIFnmnPNhNJuK2dONMPRSq2j5lZs4/moKCSX+zOQfajq65fw6HA==","shasum":"6247fdac450b76ce005e96ba2e305a565d593968","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.b04d71d4.0.tgz","fileCount":13,"unpackedSize":45757,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRGdCRA9TVsSAnZWagAAlRMQAJ146+elUYgxpby/OzMe\nDfR4MCBDMB31Ad6dSSaIbEth5Tw0Fobq8AFCZ9keaYcUcjcTLYlmZWGqxPz4\nmw/ufQzAUCzc3jk8PYBeJj32wwlLIvq6RNoAak/amq6NhWD+yePeGR2g6czA\ngK42skSzAtNQfmIfW9quDfPLoIih/eGeelWki6XC+ifSY52pdWzgWxb+4cYr\nA4+hqh8/YeOW3Zl2VkeSDmQsMOoLiQb+VtgupLuUglXyC1iMRprKyjEYLlPK\nrnFNsEtXr8CsHEo2FBLeI1sx3prth8cCwvlHkP9WpwL3Ift53pNZTmtiyO2t\nyElqZ1+i/jYCgvbaxpVK06K963fNjzHAe4U9XD7iCDeOoVWYw67LH/feQdsF\nOOttSVDZPt+/ctl/iZlARPl3z98zCW9dSSzOJr48x0kQPw0Q1GEOZ+IGP+9v\nVcN9F8jmNsgABzSm7hyAPi0Xy8IPJUylB+iGJBYtRklrGH/CqwAk40SvPLN3\nwCZvgkDuJ54JIWg5w1q1OK3+TDj9ie7nHO8jT5PzZqtIydDEq9PEY95YoBk1\n11SzeMHITUaxtkOUGatRKUnSlFmJNU/HnyTPtSoVAZSQoFuT9Qu+/vVeVNXt\ndghc9LPbrvrJUfFG5JUniYkeZBZ9R6ZkWZLP7FsuX/S4hqPI9X3dbVZTxjaH\nGCiz\r\n=CiFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDW9Ko58PKxktxLpb4sPNdY8SCDm1ZX/QMRfrd60TH0ZgIhAOGdm30DzQR25D2t+dUrRH+GyCBhS7GkpFcpAe582wdU"}]},"_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-bar_0.20.0-canary.b04d71d4.0_1605177757248_0.19442503627839147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.2c553352.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.2c553352.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.2c553352.0","@material/mwc-tab":"0.20.0-canary.2c553352.0","@material/mwc-tab-scroller":"0.20.0-canary.2c553352.0","@material/tab":"=9.0.0-canary.b39094d14.0","@material/tab-bar":"=9.0.0-canary.b39094d14.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7a02baa2ba85467edeb67014cb8c6e5bba77edec","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a02baa2ba85467edeb67014cb8c6e5bba77edec/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.2c553352.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ouBF2BWJYTg5MtI1A5eqH+LSJonIjrKuRoECO+I9mALQTCJT7EPIe8zoZVbPMNNU4jcxp++tRujfLIm8f3x4ew==","shasum":"01455bd221145b5d2e5d5a06fe7e1e5dd231607f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.2c553352.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrbqKCRA9TVsSAnZWagAAVsQP/1OE07EXDgVNFYXjvbFS\nicLcPjAYrGx2lnml1hR3EthpDU2qCN+naZg2GneziVdyvCiy23F1fBYqKjsf\nCFYfEIejVdszqNX9JpzQG+DaUaZdORTJAhyasJz1yT4kWnoXlzHVnMd8+ufx\njtEn/S2aXze6+WeFxZ4kBAljS2kXsMxkRd3AL9/2+oMb01D7DLjB8xIHLytD\nhWym+/EtktjVExXmHdVJgbiRP5bmrBLFLnkFQ/LlgMpLswIeiEj0g5Adoyk4\npRSxBGm467N5wewsEX4+RaA2wo35QpsxDA8HHOm5FfSfpeQjWUiqSGJvNh+P\n9DIc2BEtab9hEZyXKgjt9yqgViEbA1fX9OQ8GyIcSvGzJODrMhV3FUokB4Te\nsHEivUysHss6tPTyT8AICXxhs0z3rEwUXoOxrkUKij6o6bIVta7L1WhJzRxd\neSY0ZFzTxPGoOpDpzCNXxaq+Zuao3RFZb6L2UA3vgqgnZHmjxXw+P/dwtKAh\nsdeF6MK81BpKMldcAw66ti3lE/hPxiRqInNcNOjeDYUmTXktbXMW4FMI6Yht\noIi03tA6sgQsndLhYGPqqETS08x8XBtdhUSV3lPuOiy4ePb7O9cNKLoQr4Co\n1xUXO7XPzg3w/+U/92pt/8MIFVJPCO9vuTBYc/VMIUo5cwEc/DJvgFMCF9pS\nHcFt\r\n=jQIS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCcjHDvoQh10riZ76FJPyq8dC9l2GAZDx7o6nwYc33R6wIhAJrqIJ19CdY/9lXu5crkxiCZCqpTTytz+VKF5iqk6lHY"}]},"_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-bar_0.20.0-canary.2c553352.0_1605221001957_0.5760080242270154"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.6560d19a.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.6560d19a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.6560d19a.0","@material/mwc-tab":"0.20.0-canary.6560d19a.0","@material/mwc-tab-scroller":"0.20.0-canary.6560d19a.0","@material/tab":"=9.0.0-canary.240c5f74f.0","@material/tab-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b2093b7a8ece484614a94718cdac5a72d7e9cfa","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b2093b7a8ece484614a94718cdac5a72d7e9cfa/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.6560d19a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-evWATlGAkFx5GLJsnsgdkCiSWHt0l2ebFV3TUnvSnr1lN5Vz7j3i9r8vMOfOAGi/yDIcdPLIgOdUgmWCP42UgQ==","shasum":"1d7a1e9f996180e3b6d2f7b802607ab95651779b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.6560d19a.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrvE+CRA9TVsSAnZWagAAmCgP/3UHFCxSfXwIdCyQy5Eu\nKV7S+23taLoOyZ6fZ1UJ3tFvALyzGwJfjrm8C1Q5L3yKiXRozy9pTNVWJ2Do\n/b77XCwqrLVtNwfTmfFqBPnwxRj22CFHS3zDUF+p8+35F+bSYbmWwGsH4Ztl\ngmUElAo6z4NElmln1lo1D2566nrPENn2XzFHaExmsvuUZOZIIJpVqqVK1cS6\nYX+qa17QXsj+hK9fcwxkVUsB2nbzC77TgyMNsm8nawYH8MXUhymxC5q+wSHY\nzUGYcyzbGXHYVtFcLO+JvzlH8zY6j0MTLKCwwOn5Y5qGrJmde8IUd74Yz2ZP\nX8jfKvEBaudlYYOJ2FABNurVw9sDrQ/aEbw3ruXoDw41S2qFkbYcs96vneO6\nVjRckB50yKfiIOJAO4tYMr+SX8wPHgyyYkUAMhXBRPyd3kJIHQ/d6NhzCr/H\nS4mJZFSIA0peGBy4kEtkzXezmHOAwveehpsFBu3t69sceXFd+jNo3tUjfPH2\nJkU7A13FlYTiFBI3d1nncqBjTp7wfjgPrL/btNP1mPu1utuJpjqAdCnc0SJv\nvAw72MmuVhmK+7vpbyvgglE6TgbfLpQ5kb7X5X3D7n9pCQq1CTWSd8uK+7ap\nXbejvhjPiHAnOgcgnTTv//N5g9Hfvj3apYG0p5idJ7yss3apisl4OKH+pnLe\nWm+K\r\n=5FqC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGaDGXxMFG0GPn2pFrRTUN1XC8HIL0gpaZiP4JQS/86xAiEAj6m8Zgh+ccfbTcVdY5VRf7Fj54jxVH6OasUF3abl9gE="}]},"_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-bar_0.20.0-canary.6560d19a.0_1605300541498_0.77485611191765"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.a28d5ec3.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.a28d5ec3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.a28d5ec3.0","@material/mwc-tab":"0.20.0-canary.a28d5ec3.0","@material/mwc-tab-scroller":"0.20.0-canary.a28d5ec3.0","@material/tab":"=9.0.0-canary.240c5f74f.0","@material/tab-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f24283a75330ef6de8cd16f8373ab1bba0eabec6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f24283a75330ef6de8cd16f8373ab1bba0eabec6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.a28d5ec3.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-natcXX51Bi3/KtesxuElNPKY2+R/b7OyRs56+VWmBEj4pnm32/ZGE4eOJbkfj3YFToU7ZuQ+iltUUXA1OmeKrg==","shasum":"3424c6653d9c1a6d4acffa0e3d0f69f888fda30e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.a28d5ec3.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+s6CRA9TVsSAnZWagAAGYwP/RxZE1wi18RF91vEVm3N\nMuOOWbzdXSto4yPiRL3OCI6TdASyUnFN51PKNeYNm+sZxpp1hYaG+fUtIGJM\nfHqyN6l7l5/4zeUEMnn0zGt6yYyJtB7QzqN5N8PVP2LRuxMnqbbsqz3MjR4B\nB88UXfkcpKAGZ4111Vqa+qjmJ4AAqOUxGF+opB4sestx+jOF93sFqiXsP8HZ\nMyvx4byHM1O0YyjIrrDRbG6BQZ/VG4EALYtxlHNAls9S0TT1L4GPl5yfemA3\nQ6/Vldhi/niC9GNf04DyOGCQhn5pkjO+RoLxLAR0uA0K+DoPxH9JTKYzC9k5\n0WtOZYh4jeMzuL7kVo0Ye3o4O3if9y3g2VqhOvT4sOetO8jMeaWgCu91mB3M\nmMZohhzZL565Kg/CuDIW+tUZo7aLtnZnXQBEre0aNmlyPcDMAWWorlvHrU+L\nqjTQGD3PrMKueLE7TeRfCRKwpjqJciaNkiJ3quZOaj/JCglL31Pz4R8yQOvl\n5F6Y8FUqJtn5KBE2MjWUnvAiwzvgugkZ89UZ8r5nLl4rJAmhkwzJqvOJuuBg\n3V7RTwDR9oXthb3X17yp6Lg6Eb5mXuYbmNXxwDWH/PNSgxCe+2Dhmec3zz6W\n1NgE+orXhvNy2AxH11183ZjPh7MeQRZKCdEXr4wsK2e3QBDfC4KXdVvbyfi+\nWYqf\r\n=3DYa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKIWnfoIsOexm7tSaNovk0sPLCGRjHA2tTPSi3Nm7NtAIhAMUPX5LMrxKUoa8pKRsTnNH8wzD5lzocmHoOknYUSUHb"}]},"_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-bar_0.20.0-canary.a28d5ec3.0_1605626681916_0.33021956191855195"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.03e7e778.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.03e7e778.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.03e7e778.0","@material/mwc-tab":"0.20.0-canary.03e7e778.0","@material/mwc-tab-scroller":"0.20.0-canary.03e7e778.0","@material/tab":"=9.0.0-canary.240c5f74f.0","@material/tab-bar":"=9.0.0-canary.240c5f74f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b828c4befe76e485a57dc3be64c348c56f37f89a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b828c4befe76e485a57dc3be64c348c56f37f89a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.03e7e778.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/uHYr5iiVhcpIyyeznqUn9tyybTxpxBCqAc7VviQ926wHD1f2SXAYmqoeIDhmkArEVrkzjt39z//s3Zs1fRBgg==","shasum":"785c7f349919a61eb45e4f09bc07df0e5b22f8c9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.03e7e778.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftCP9CRA9TVsSAnZWagAATLIP/RqKLSrSby97kbIlioh/\nNt385pmlaJdEQNXSz3td3AkHT5tq3PI47VOr0TbgLbNJjvMcaMvOkmWTzSzw\nIcCiW+ouNRftCemBP3BPABh6vDmF2bTbaJK+yaz4G1wlZKKVbVWVTFl9z56Y\nIW2AWdRq5/dcuj4u8Lwj47VlevnMekCLtb7PC4lm9Qlg7FSLLOxvjtkNeoMs\nHBvl6X3juO5c7Gd7JF5AjUgfpVOC/Ja7uGyE4aEzwF1Kcet5dbHEoGxqe1tX\nnvI05iYQurXckTdSLfReQofLDIAdsXHS3rXPMH3xEfmQb1mfrPN8LXXO5Cco\nuWiMPBqCFXReR81zSUGbdx5e940ScQcxfUBikDChziBSNl5JZbiWYH5tJ/Q/\npF/MOwgw9cOjSZz8SLE0XcxN1vPncdCx4WYyrhTZBR+QAyJeB+nIuuWxOPfK\n1SxIuEAyWfFJS8K6lfMHtRVDCTg1eHsH18oRbDV2plNE9PlbHLP5yXXA+5R5\nqfgqDn72pXqXYTEg3fyrWEw0d+h0QOnu8bcz32+CBr0o9kFsEUUfzi4DSY47\nq69emIDl3XkgglQCRmg4y/3DSiuaZzyQhg2L81pTQc6hH0fRCs+9qbG2RXhJ\nQbnCQjziDdC3qAI+wFL0MNcjB1EabY5tLIXEYPhhdYoMXgJmxrKLXxTuAP26\nrFYR\r\n=OLpP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNDTVZOVZNkUC17bIlHM8PcEfvUYB3itqqbLGk7ceXPQIgPnYp/qgtOycGN1PoVc49pl+6444lSbGKXDJycq3Mt24="}]},"_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-bar_0.20.0-canary.03e7e778.0_1605641212660_0.754448075622453"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.ac8ed597.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.ac8ed597.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.ac8ed597.0","@material/mwc-tab":"0.20.0-canary.ac8ed597.0","@material/mwc-tab-scroller":"0.20.0-canary.ac8ed597.0","@material/tab":"=9.0.0-canary.482ff9091.0","@material/tab-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"324571445f4ed0575cda7f727c54e156bce8d624","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/324571445f4ed0575cda7f727c54e156bce8d624/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.ac8ed597.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rgzasWx5AskH5Vex3sZf9cmnYN1aIw5uCnltr695/oJI27Ner9xALRAmeF3fkH4u2rHwkaqwrRyoZQ10Er8XMg==","shasum":"67c49e02b7097a81fc046c0e3c6af0dfe91f05a3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.ac8ed597.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftErSCRA9TVsSAnZWagAA6ikQAJA0MR85xFzHtjxsU3r6\nW7Ggud8oDzMUA/aP+EHXihTi+8ELF7T3OzA5L/naccwsvXonR6SKviSpqlLw\n7Wj9kyzN9syT0ZheIfBuOm0daJgv3ILM63piRHEYsOTKHgZkkNkYu7RUD2EK\nN4TotIm923seQtIBGYWgIsfZYxbmzt27D6a2EEwk+8FJxY8p+csy70EQm/NI\neAferO6jFPyNaFeEaaIlRG4QhV2VdcGw/6gh6gM6LoBd1xpqCv6qLpoOTuyR\nu8s7XVF8Z30pjR/MRCqGQLnELpn3bFpdp9t0Of/vYTqFrNWzM8GVNHnIqAZY\nMfrj4LW5d5hnMPPZ2Sr4ZrpctWZexH9fr30P+APei95kDykW9XYNUEUP3iKt\nMHQvP6CkMtmVgAhiU9ZRFIoGogQe/Hc1RP0JGIbHY85CTWJXTPOE+ZRBuWsf\nXVdZV9CeZExOwmjm2bZ0cAkH47Wj9xj4hxfY8QaTnKv7ry538s3XmMI559oK\nQQqbO1YvD+ZLvIJ3aUNQ8YJptnwJQIUXVsxuI/vwUXZmGLF9YI6xzeBiFWYB\nofAuz8ffJYeMC4mBS8Hw45X42qzNysbrMFDY6PsCYT1qBQb1xEMz2lL+y8tJ\ncDKdxzEgXwM5JD2mSOI6Zj9M467TQgB8Js9yZ9qu1xbEWkWYo0l9WMU2evo6\n+RM4\r\n=gz1t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLH/VqnHGLxBAlT9VzzPiiEfvgGmaksxNlgonEIFrMwQIhAJfEqv0GKIq8pR8lCxiq/5C0EyKZ3ZJlymON7qyCx6fP"}]},"_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-bar_0.20.0-canary.ac8ed597.0_1605651154472_0.8599413045626916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.b6a60f60.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.b6a60f60.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.b6a60f60.0","@material/mwc-tab":"0.20.0-canary.b6a60f60.0","@material/mwc-tab-scroller":"0.20.0-canary.b6a60f60.0","@material/tab":"=9.0.0-canary.482ff9091.0","@material/tab-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"423d1aee62c72c8c88e9e5e792712bc5d4d10b13","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/423d1aee62c72c8c88e9e5e792712bc5d4d10b13/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.b6a60f60.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-voFuMynvM2oIQtgiQhlQW3E2EQLzibpZsn4AHPXkBG9Q6S8XvxxySwGo60QDWvcmMZ0b/tGJN+2+BIXh1B+Vsw==","shasum":"0c6b2b9a25967c98949749365559d4a01c65df77","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.b6a60f60.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFRGCRA9TVsSAnZWagAAGokP/iwPYHCG2pjUKJBPZEaR\nW4bKN2itXM2xWIGEqn1f7vRnIj/GYCgd/QDgERynfPAMGfr3BK5+arL6Mbr4\n2BHPrPS5gaQoAU6rPmySMINaasFoHcDCLfGICa8orUIRven4f+GAlKBypZ9s\nHf4z4KKjGuMvJdzMquFRy8OKf258KD4dyb/ME5dN7I80ZcCS2NJTc/ego14D\nrZwN34u/8XS2aNgAUcifBhHDqikpsMGjJq7oO6CWbtyIHzUvZz34U1ATHju/\nfEuNYBVpOPqUjf7KD2jjKKOTfXCzixmyq45tIbyerSafd4EGBaHQdR4g+L9f\neBV5MEGALO3O9aGzTss1xIzV49x6IzVpvhfuIIy8ugTRYMJ3jooM5elb6IzF\nR8dEOtdVWQOwb3/dYwk01kyzZWG6Z2ElZTcXuUbqsHP+m74KESgqNi8sqOVY\nyw6k1npuWG8RuZ/9rMKt947vJsPOgysFlbqotMJT4qFffRiYewT7uQw/MmrP\n58/EkiEfjg8yzeF1jrsHA0cL1ML4ilHzyWwdNFZig3CXsI/6rGN/n9uCrm0D\nfKBCiskct9Tt2FC3FLUcSgnEwRBcH6h5gP28UAEWtS0d0LaSa8bcaCqrya9x\nO+xyCqnzZGx5KvzVDHqaR69xH8SxJh9dQxPXzt0Pn0AlC6HHdP+urZ8rBeYU\n3MEP\r\n=qr+H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEDV+n+c8uLZD4YcVAx5PceKcDsqM944DDS1UOlcqyySAiAnVd3c/Z0rdpVTEUUt5iLxjYJ7d6lJ6JxKyfr1lrXSVw=="}]},"_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-bar_0.20.0-canary.b6a60f60.0_1605653574506_0.7153360499832786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.71cc24fb.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.71cc24fb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.71cc24fb.0","@material/mwc-tab":"0.20.0-canary.71cc24fb.0","@material/mwc-tab-scroller":"0.20.0-canary.71cc24fb.0","@material/tab":"=9.0.0-canary.482ff9091.0","@material/tab-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04fde8dbd7934f14927b0407ac285d7396fe68e7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04fde8dbd7934f14927b0407ac285d7396fe68e7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.71cc24fb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jOD6CM9tqtWVu8Hd8dqptZkzAYnqf/bdRmNjDkyL3CdlgY0Ce4yB/XAs4j3ifzmbNO8mjtrWkC1Hgw8eMr7lHA==","shasum":"21dc8344eeafaf4d3f9f9f1f3cba559d9891d4a3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.71cc24fb.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftFoACRA9TVsSAnZWagAAZf0P/0Zte9ZzIWWY3TXS/pdQ\njz2C73+yoXLcLmN2TvfBXNyIV7HWR0znaeHi1aCdw0knzrTWBjneS26Au7sz\nuPRKZdAqUU7E59rQSLj6q3E9F1RuqRJkXH0XBMwAkwXIoM5RDvw+QfskIeI4\nhaz1IaZPWuy/CWZKrllF7TFKKQQDDt7xjPCvJwKnxgBn6N2mHL2/fsEEMYsG\n9mZ2RIRK2S/zFti5jQ2cbHt/NbwW8oeIMcVQSTtc0/hDZKSI3vC1Kd6y96dW\nIvPhHPvdXgEhiw4zzpWTNu4srhq6zuOWXxgLeLZZI6/QSlEibodE1pa96YRO\nw6s8EMulZUhBaBWA7A4PQO5v1d6GD7k+lAIS4kCwl8xreqrqK5a3ZmkVIrPa\nqe8sVs+j0dhSdgMg6LyQQBKzADZMFESNNcgD7aIwHEKIANz0OKjwq0EVzmtM\nGjWkDCG6KRxJWOzHKdSDFqjo3wKIKLRieSsQpqcZsaJYio40xcn1PqwafoYU\n5O75FEpQpRzsKauYtDKehr2rumaDnowKHZZNuyrq/5/3wBjFLA/vlbFPsJ4W\n2LP6WAGRH0Yu+3KSHY7rRCMR+nMLfRWWUp3cR6Oc8j7OwI3LBjaF2wTBBMFN\nqL9CfmgV5+sf8F5i7cG7OZDuyQjc4RsTBKFC2ZXt/Q7KNMuHtnOZyb4WXhX7\nqBmF\r\n=P+f6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCYAq9c+/f+pkLEqlpED1hunOId8bnT78gIErL9z7yiFwIgc1FzXpDvnEan1PNInTHGr7fN/ZgtNQnccWOEWNws1dA="}]},"_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-bar_0.20.0-canary.71cc24fb.0_1605655040152_0.7277440322821551"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.761027ff.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.761027ff.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.761027ff.0","@material/mwc-tab":"0.20.0-canary.761027ff.0","@material/mwc-tab-scroller":"0.20.0-canary.761027ff.0","@material/tab":"=9.0.0-canary.482ff9091.0","@material/tab-bar":"=9.0.0-canary.482ff9091.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eef81b2f51aebd88194386f191f7a40e504b6a70","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eef81b2f51aebd88194386f191f7a40e504b6a70/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.761027ff.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-KDbOhGzKrgevbELmM8MH05KEjV1wiBg+37RyAz2ZKYh6DTVM8Jxs7g0hAA42w+5UYMIyBTGNdCYjnfnFtKfSCA==","shasum":"b1bab2a157da4cfdb9060521687862feaefae801","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.761027ff.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZzbCRA9TVsSAnZWagAAP2EQAJjo7YaUhVdB1puMaLTR\nxilVqBmVLCrK3CzJwplOXuBp8ajM/pNN2S9ejJ1qzYa8DFS+wvWHrTUsMHF0\nJsQY8+MlKNhhpf2figxbQ9nGfAUfKODyZdnlWTY+7uKGKLAjdPF7r5D5jetk\nVgfdsLOrQeE0b1nDyXRdZIWof5wxFRpqervi06qvCYWzvMjtZc8KdoYymgLM\nxWGpSD3alRWoD6leQp2ePUjHekRdWA4KuDHYnk9oATGNqK3RzdIGeeZoqRs4\nqDMzdBKDNfHoPnSkrdvJ9p4i9+ywuRWeOEHe1S1sZMsR1r9tSND/Y/UWlUwa\nKzKPvMHyjuKUNo2hPZNukS2i64iK6z5e3uyuuuyWfl0woklA2vSMODZVXF3R\nLUPoxmkDH5xXTFrTMFJkPL/R5pE7ygSZ1kVRg4qgJrEUELKan3Ck4VIB+zUt\nWliASzBp5z7wta6MlVEWh+t6XYYixN3muhBWFo7KQXrTG/v6uQp98tJkuTtp\nTToBfGTUoJcbSILwvQIwEQFdcttk80DGo/1GWVdwwHXJuybz3LUBPyDCf4gv\n+xm/jldYZwiqcDrk9gG5NWc/13FwaRO5qEdIGzL6oA2MW5HbfuFtaKwPu2JL\n9epwiKCP7ekgmhdi9zACSAJe05y37IV+vjuiSlou7m9EaH9OtvLe36+JD00I\ns9HL\r\n=em4a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH9zMu9LOrjTjGDQ1FnDSoHHjbzI2rewRl18LJBh6wgGAiBzJIlI14YygFJj1JmZn19DeIOLBq/ld8TELibAn0Cr7g=="}]},"_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-bar_0.20.0-canary.761027ff.0_1605737690742_0.2927369387925971"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.dc93d04c.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.dc93d04c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.dc93d04c.0","@material/mwc-tab":"0.20.0-canary.dc93d04c.0","@material/mwc-tab-scroller":"0.20.0-canary.dc93d04c.0","@material/tab":"=9.0.0-canary.99cfb6bd5.0","@material/tab-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c3e20c69c9dd47eb0b31f0ff51e8150d8d27ee3e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.dc93d04c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-ZZczzTwlyOeTPeyZgMdzOBsZOA0zQL+m9dnruckAJOAQwBs0c1D9PUcPISPhOE+i0p+OfXcVX/7BRQe3MOj72A==","shasum":"130a5c5bc124e037c48322f4c53413a3ac00b9ba","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.dc93d04c.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftZ4tCRA9TVsSAnZWagAA9eUP/3Umw+sSIH+8RxLzZQWz\n11uYbblCfybGeyw8/AgSbK3O+PW4kQQsJ21830cVthxT7if4uOpvfODBYnTb\nJnS+qWuBGXU3h0EtmzmlQ6P1JT74zcBzg9goyv4TKFHlt11E7jUhs4wJXi64\nGURRnS2shsoOiNDUR1X4oTJBw+el93k28JqYjwqrZMscPT+YhBXdWDORhHXI\n9jRKCh+E9t1km93IFwYcD5AviROKl9oAJQdh3qymLeh3zx4s+OcgW9cG05g7\n+nhLEMZ1a+KDessPuW7ptMaPRbarMo8rzoRtWAJJdmRDtAiIOhRA2DhptuKz\ndcpP8kaRaNZMszW8k89hSo/d0O/fAiYpwmngAoJFn9kUAL5lcKqdMfvSViLX\n6ZDyi93l2EZVsRSoqjE7l4lznsVb4ZyKgZCk8Zf1fpxNU8YdJArYaFtbwWc/\nHmCtSafMZ3Jdq+E63BJCfVCEB+ctmREAw1ACF3dJLUzNPhXtqECsrx29x85u\nvNKhLImqXf1OXa3qcGLU1DZQA7xT85HzXOGaHQmGVNssrdJS7J47Cjwb072f\nFbkH/08x/OEboB4S4n4iOGotOoR8vinLSN2buU1eJ/Q4qrVTRs9L815W7mfX\n2AKgcryjgiS+KP0AmruBUilh3tSkbflKtvKTuryaWE8tuznxkA/gC8ZOVCrj\nUoKp\r\n=3sIQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDz5ULD+LaJf0kfgZ65tPp3ZgpUXmaGf5y4Jyyn3CS6RQIhAMcfQG5CV3Ym5na32Eh4XCnF/JUqzS/I4rfxX0cIdFmv"}]},"_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-bar_0.20.0-canary.dc93d04c.0_1605738029557_0.8528237911781604"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.4a5d4eeb.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.4a5d4eeb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.4a5d4eeb.0","@material/mwc-tab":"0.20.0-canary.4a5d4eeb.0","@material/mwc-tab-scroller":"0.20.0-canary.4a5d4eeb.0","@material/tab":"=9.0.0-canary.99cfb6bd5.0","@material/tab-bar":"=9.0.0-canary.99cfb6bd5.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6b9b0de3adf5b550661d63baa970642b71da5fa5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6b9b0de3adf5b550661d63baa970642b71da5fa5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.4a5d4eeb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-mLz+W4TklrlgU/awziKn/0Y95dozUs5uXZOL9M93rho5xco/xqHa0lxZrjXIq851LS5ujo63OUKkVo3uUV8YZQ==","shasum":"348886f5e2d54dc71329d2cdf11c710a8aee1b4f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.4a5d4eeb.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftld/CRA9TVsSAnZWagAAAI0P/0cNzWZ1ILZ7UdDMwsMi\nexW3gG1q8Agoen5YzJ3t2PGB2w/4CNU4Ws1bP4buvB3X6f9FERuFJs7Zp46l\nfZxoARLqxUXHqR0suBR8rEIspCLbPMgfAZ0e1nNk61as0Tcun/SvCrkIdrON\n8NutBmoFgxlWQ7muhH61H7oRj2VubvsB+dwY6P1b1T1NgbvhayMoSinV4G8N\nxREGDX7PIZ1QD0js2WfRMOvgyUITo4pPoE1xofn2WNB01t6ewuL4OUPNUIh4\nxB0KE6kfhnrKf1R8VyyHBcelq2wooMZXl6h0Z0DHTJq49rBIxq9V7jcvaKMy\ntSD8fbzlgLHYQJO419gotGGa+aeuW+92f6WsfCLHfhMeGKLOy7hlWQKWAOEL\nT+dK4q46S+8w+jNH80uhLk3aUMQ5iakG+BzIcEH9raMMm8MozhBrioQCAvY3\n1f2gEoiNR1rw4tu+tCM/mtG+xWNLtExfD8PaDw9QyUaVv7TCmIDDmcnoxVT3\nnz13gytxgY0SVgT2XNzcsbxNPdzX3JzkVZL8a7lbPJdJNAlxdqMbo7b9mxW4\n8oMlBrqdm+C8Wdg0iGu56XF4pvegUugfR877PZYZ6dpRdqf7xk3qAkH91uoe\nkK/qWkKxJ2NFI0LF4bVsye4e4QSI0QcjqAzVQE1fusvODXT/L0sLQht5d3qn\nKegD\r\n=+olp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0o9rhCU7AHOEZWc/ZUT1Kh6EoyMsxptcBEy++TQoC5wIhALUjKFd5tInFpkOfKP8fr99GUjQJtsgejC/RvrIU+Tzc"}]},"_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-bar_0.20.0-canary.4a5d4eeb.0_1605785470671_0.8773870395652379"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.bd176a15.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.bd176a15.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.bd176a15.0","@material/mwc-tab":"0.20.0-canary.bd176a15.0","@material/mwc-tab-scroller":"0.20.0-canary.bd176a15.0","@material/tab":"=9.0.0-canary.30c11bfc2.0","@material/tab-bar":"=9.0.0-canary.30c11bfc2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8c9d27b834d60d0f197616dd1acd74cbf2cada07","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8c9d27b834d60d0f197616dd1acd74cbf2cada07/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.bd176a15.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-iFopEJx3vjKANrCbdZr8B4HovRli+nAsm+G99Veov+UvTXUhvYAORssKl6ZNu3oIsHZn0vUxXACo2QrwWpoKrw==","shasum":"a7af9154b11648a1c19631bd14be357f6edc4f3b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.bd176a15.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsNLCRA9TVsSAnZWagAA3MUP/3jQ/B0oqWI6RB5fAXhh\nkX2bw/hJ8rsGrNovHlgREYPvrI+PpNXDAwuSSHNRm455GVyfI0hBh2wzuIVO\nTU8bxOwTeVtwb8+KKAZe6LE/dTTAuilQolQRX3cAO2JT076Xu9aB7TtiCNyC\nbP1TDVeszuDOHM9mCkRQ8OkxOcjAFVsE1ebZgGw3tpFJ39oZabikm993OHwl\nUj8+XAQjJd9ZGgdOP+o8CpEeqjrm/8wOftApx0gBC6lYYnA5Raxc5rg5qIVE\nTZTMJZab+Ql1eGu4NerJEARkG21j957U1qXP6f/xe5g9FWUXUiw7uIkb9YCY\n0IvXLeYqO7o//2vS4tbZWBqbRGhInz8DAOMTWZzinuvEW6S+evq31sXX5gs5\noPJH0sWzOwTHGshHYixvpMwRMaJd9nL7PaoOOt3b06E7AYzAQNxp19gS7mN3\nFt5snIgr+EfRjNjLgY6Q1wTiZpwEqsoEZ/U+CQ57oZ37Yelzcjmtbykhkwm9\nljGDlq0E5ms0wBZOwv1sijKlk7fgh6RLj9uqLGWxrfAy/F/TBvsl0p06dyBE\n/soqXEXInk6pOuZiTEMe20Z5hU5bBF2C1JDSvy5y3hzby6WI3CrJctC5RJwt\n1uzUvzbRsn0x0R3QnB5A7UsZdPBJnVJ8giByeTT9XNW0cGImXlhUBjnYk2tE\nJEgX\r\n=Grm/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrpYKvymi0kwu7AumtLcQEoZzRdI8xHeAOqviKqu5p4AIhAKdv3uP64fKnfTaIliFUi4JisWZz7AEVMV4xpk2zQc8Q"}]},"_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-bar_0.20.0-canary.bd176a15.0_1605813067233_0.5868830599172958"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.e85aa60d.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.e85aa60d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.e85aa60d.0","@material/mwc-tab":"0.20.0-canary.e85aa60d.0","@material/mwc-tab-scroller":"0.20.0-canary.e85aa60d.0","@material/tab":"=9.0.0-canary.c927a5d05.0","@material/tab-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"3a749ec8278eb0b5833500696f08308837328144","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3a749ec8278eb0b5833500696f08308837328144/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.e85aa60d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+WEczjUxIfC31trHIaZiZfrNcsxYv6XyjAJc6WbWtPyqpVuXKo3huSdnGr0T8pHN/y8kumSiMqV1HFojPvdpwA==","shasum":"e497b3e2758ce618794656ab75f87c5ac8839813","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.e85aa60d.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvDbRCRA9TVsSAnZWagAAdS0P/RVVl4on4eBcgTPUGws4\nKeuYRIUsjdT1rPHcrQWj8bFAW29POJH7tEeJjbress3wBvkoa3A8rjdbvG06\n/jQUWTqumDGM88zLiQf1kDFACXjgN/mdNO2CxfVReYVK5ya5OT9Q5f7Z8f9H\n1GeZ/HPvXyXsFXDUER1OZhtk68XYY0lUOhdQ06nFOLciEoCo2uzFYiY8srtd\nTLTHAKeJh3CGzvOPBzN/vNXAbQ+ZIeoNhAEMe2QV+O3VCCcVfqQ4X1iyDXCV\n9z1Up6E4IjPIQhzaMBbg2NpRnhL4X2Xuzvq20ibUbpJy5Tl2Dnc1yEau/axZ\nmpMn8ebjDkogc1jgBAosj+0BvJ1wyNZdGyGv2OlhAc3dLLmMJ+SGHV6Z8LDP\naKPH7sBniWI3D6aC4VlFlnU/WVvc8GGsUD8K8B1GSf5kqgDSIFMGcVhFXuQh\nXicaCDwqN6ET5pBecddGWTUxNURY+Fr85iqSgBhiOzg+Yn/RyZzc8BeobEak\niEY4YT9prKIG+LtwfmB+pss4LOPskbidFa5X/hQZzNnm14RNXGEzeLTncRIy\nZsrWuXph1l+PiBBxWr2Ufqqr1JbFwLoSVags6D47Bfg8TTNfBYe8W9ZoFscp\nDIRL/DlMoHAR1rg7Hqdzp88jB+/IHDmYmQz40tRC2VoGe9GvtkpxZ4vvGYwr\narGj\r\n=xI4V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCElyCLUMgFiHptLrM0iYDm4E2HbojLem9tHC50czZCPwIgKtiz7uRI4pxcoAKncmocMKwjELF1VofFBBsrd2hgqt8="}]},"_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-bar_0.20.0-canary.e85aa60d.0_1606170321572_0.08940449040090304"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.72092360.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.72092360.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.72092360.0","@material/mwc-tab":"0.20.0-canary.72092360.0","@material/mwc-tab-scroller":"0.20.0-canary.72092360.0","@material/tab":"=9.0.0-canary.c927a5d05.0","@material/tab-bar":"=9.0.0-canary.c927a5d05.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad7741df1b6ab1f1eaee400d6026dc5ab7821d66","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad7741df1b6ab1f1eaee400d6026dc5ab7821d66/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.72092360.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-4XC3jnUv4c7E0KZyzmglMWssARWtQXDtbeDjPTSwVW3or8ujlOx51eD40gHlu6lHeLxbvYvcQ+UdooDaAprjRg==","shasum":"fa3d7b3007073f4d9a8f09dbbc0a9d7929297497","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.72092360.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvImjCRA9TVsSAnZWagAAEx0P/jXPoQXZl8dZUWcwnyTO\nawejfCxKGL9PySEt+grOrProjiXXrcHK6bRuwENXeT81uc0quAeUBmT+knAt\nl7fgisQAXdOXn3KcQravK6mJ4OLHyYfUaTuzsrkpwUJI06j1WJuhb5pijyE7\nvCNYIPEQ+s1M3zheOK8j14nWPlkuBbjNxbWDjpwT3Fs/aRbxF0cpQO4pJzyY\nc0XYxkodxLJE6gQwtbK1dQbHWyTP/q8ssVeSBjk4b+CLwRVGt8Zb4gSaYvqk\nVpw75i+J0cjAR+/y5QN+FmU0zWsGPAWi3UXEVTNOeqGzAhl4dgGx8EU2voQk\nE/gAicMVxtP5nVv7bna7tyQntgD5dwpk7y2u8CCoRprk3ue7b4n/oPYAgIr0\ndPRdXUkD4hYUvncU7/cVsbx83URpYcIr2zea9kKZsxpa9AA8i/cC5jktkMxl\n0ka7qx8JNm0FwJ/HBcOJaYDZ1gkIYkcufW06YQrpBUWGRFCJ4LzrSJC+DAwf\nO96njCymNN3urEwxAFPDzapKjkKC+L99R6WciKp6+hKQ0naaS4LnhKiSKD0P\nraNrwUf7mCP+7MoRPwFRRvkBeCSuBdKKHisVpqe2VCDuYAI0Az9lhI1Dn1WI\n/2zIi0eFyvk+AVvGxYXldu8LyRkr/+3M8l0DbDDrxmVKvsazMbh31Z8chYC7\ncDAs\r\n=7uQk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAqIwYPzvKRlCuJJL/ukUR+6WGJXdLw8uAUWEvsScvClAiEA/LDn3wIjWHWqBe/9qmlvhbTLsavgT0HWQSM6+GKCygI="}]},"_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-bar_0.20.0-canary.72092360.0_1606191523286_0.1886439990251605"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.baf9d39f.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.baf9d39f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.baf9d39f.0","@material/mwc-tab":"0.20.0-canary.baf9d39f.0","@material/mwc-tab-scroller":"0.20.0-canary.baf9d39f.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","@material/tab-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aaf8660af2b57dfe4523a224abf621deb5b5d3c0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaf8660af2b57dfe4523a224abf621deb5b5d3c0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.baf9d39f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-AkBBw3CFSBXgE9Sl69A85q0kuu6RWpLy4w5icLKixzHCvOQK8khmmPSSiHhDGuezxPTyCmHbH2KVk/C3uSnRBg==","shasum":"399c23381f4da5c53255baace1b0e2040f944bd3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.baf9d39f.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvtFGCRA9TVsSAnZWagAAyi0QAJJEmYLKZHIXS2bTpbVc\nfvFXF42VijAxS55bSG95DXpchbEOcUhN2Fvk62uxV8PIy59fVfqIHqUbDo5Q\nFIsuQBtMvxmZ7yIUfaBtBQGLsqLA0pfGtRmuS82XWDzq4dLog2ZzQ/xZxNMV\nlpqgZdJvDbnYNfHF87Dw1nbgn9JEPTU5QNAiNgRQ6+8/QLPvqSMWw0xjU7uU\nRFGWT6VVdUvor7igwof0KUjdWMYkBXlTthZMz4ZV8jM1fuqZ4SRSJz3RDEMk\nae1QpcVHD8snNKcNIB5/sbPBhgUz12N3LUSikI0W/x/zET31ljYKeY9orrEH\nCw2rPiOm2d8ScEGhL8dHLEoLs6FE91nEIL9AJyiRspOONFVi2Wc28Mi1+Qb/\nFEXaKX4KJgx7PVeBK7oiKn9122Hp0/kUr5MTqM2JFjyHVZfDd0Oc2KB4ozEb\njevunS+WR3ED7yzy7mX28i1h4vdbovRPb+7LIG2hbyTnEPCWWQjGY18XeVR8\n1Gpz6cdreQQ8je3bLszXcB/iGXTQNa+2EzMHBegc87jGGidv58mZaI594AC9\nYoMO0oVPFkQeF9cQGVuOjNRucuIN+xu8jbV82QR1wCUS7VWqJe5IivfY2iKj\nUmuIL4QdrjBDJ8yuvs6Hy/6kS4DE7exEvqM27EmHsyzo9xTZ6Jj74xThPnHC\nXBEf\r\n=c1oj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDRVazkcWm2yXac6rIAPC6xGDwitMZ0H5V7LXBcgWShVAiEAi4aL4ju+J3QP87AroUfcFcXr7X0/ZDdQGCs4R7ypbIc="}]},"_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-bar_0.20.0-canary.baf9d39f.0_1606340933978_0.32133761254693116"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.51aab0ad.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.51aab0ad.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.51aab0ad.0","@material/mwc-tab":"0.20.0-canary.51aab0ad.0","@material/mwc-tab-scroller":"0.20.0-canary.51aab0ad.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","@material/tab-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec218298fa6cb371e229348142cfd266d65cbfa9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec218298fa6cb371e229348142cfd266d65cbfa9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.51aab0ad.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-pP6ymTXAiKleTIWfSI0fICz07CqmVk0zHRFnEOapvTzIKPx14jzTN8mRGcCu5q+QdvdHX2CaPFyhwTp7J1V+5g==","shasum":"47d50e0d779a48d6fd6636d310207fd5d62a2a55","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.51aab0ad.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxZbxCRA9TVsSAnZWagAAWNsP/1kSUbGHhPbrtBmZ/Fg5\n7KOiMaYq7WNfeMoMAO8hM4ExC15omOfgJsCSKJJiUY8VCxM1O82GmooPA0IZ\nV3oCtdR7la7ytznPYPHriQ8LAuaHOJv5tZGPecGb+BQ0i8iPx8ANaRVB1DjQ\n36nrLZo16Z7Q6ve7vXocdxIL5cmdPyd6YpWGrmuFTlXWOKIQDKuVEnKY964Q\nB38ZvmHm3YqPZSUhQjzArynFcjZaW5zgX+u47hw6CkqXX7qQRWiQlGwTWJSR\nJ2X/YIn3AXpr9Di/JgI+uDVOVajipr8ZTyZ4IrdyG7G4RUNL8VxuNA2+hPhn\n7wfDy6kzocaPZ8dTd1nkOTAZf1FKeUXWSCdnrJGOmz1f7F3kOoL8HVCr6fps\ncG9R3sAewieZr9CnQ+o34V0+AtwBbA/qsVaRWRWdmB2O1u3KSgVhXw9rp0Hi\n/qpXMe1+62P6E0B2ISWP8eFl9wdTyzsRpG5myJTgvEYIu4Ams4ei2n1LmgBT\n8YR8OV5+/WoZDEkZwQMvuOSg1VvEmoeFurC4x0JkjF06lOwdwPUGmd0GcbFI\nhxFX9PnWJPxTXHyeKwk7TJzSerSaMSOsU7LIaEhdB5AM56OITbfka0gfy9FC\nSDVJ5RbwR4b5FD26Ilo6GJ1PBBxiXMsElGD1HCBWvSO4pYE/pM/rloevWi/F\nBf8e\r\n=6V9m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGa5m5W5tP+Cw32sJHse3Rg85fdO4tmFTOFsSvUOoG6lAiEAwZPjiN3hB7g/RB68D/WSji4Fcg1FD6CTNLYH7yEbM8o="}]},"_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-bar_0.20.0-canary.51aab0ad.0_1606784753046_0.45680749253683106"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.8fd4af5b.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.8fd4af5b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.8fd4af5b.0","@material/mwc-tab":"0.20.0-canary.8fd4af5b.0","@material/mwc-tab-scroller":"0.20.0-canary.8fd4af5b.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","@material/tab-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5b16bb5535dfd0f880b710b51d20b7085d91658c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b16bb5535dfd0f880b710b51d20b7085d91658c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.8fd4af5b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-zW+T8EzJedI45TXZTNWP38MnDv5vMM+u9RJVupweMprmmru+PYLRWa+qIUPczQNXgnulTNHjAc5MqmzorS7F6g==","shasum":"f982348214f651e770067fd933571553e876c305","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.8fd4af5b.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDEECRA9TVsSAnZWagAAbcwQAJe8Vq+5KKslPhm5DUEf\nfhN2WyTNln3yfpvqTJ/mtaHOYqyS4UFJRnc6JSsF/xWuGteAAyJNnrmuFXT0\nKO3BXzxVqfKEMgrppKhDlthjdiMMlmnlp+ICW/F3BQwgRK/tO1xrg4j0BTHr\nwRtsKITDbt3t68FbqhwBnYzWTciarlKXLs3K7tU73Utbi6DHrufd/JcyYVgB\nr0wV97pdME92ug/qNzFpp27gxHIG6xb3ZIgkSbGgWLRJKlIPgJiadjFAwxPM\ndeCVtvadJU8J3o0NVDTMEh3Y9tgdsdkXOvllAuonQdwdkqTydGM+Us+R3gsJ\n6y/DR7ZmX+PBfKtv+yEa4vCgnhDJSB4lZIRP7lgLM3qUpfyigDFuXqodh5VS\njtBHl73Xuw3guyRn2i2OuFzLUvw7Q47Lic9oF7sxUDnumIT6Mmkb6zhacomp\nezXhEFdFCEeGV5hGN4ssVC8OTxoiEcfckLXadZohn5iHCqrOYsoPQjaHjg0k\naVpHpEbw4Mnni2dhTJjKjosYbe76cIdDR3HbPdye6U+MknAgCMM7mJKs9ssq\nWZGlkgYG4jaLT7sUqj8n/bK9fQ9gicKpUH/Ns00O+0g39sLzzsoppnTbUASZ\nkBzBDM/iS4xi6kr2SyfgDIdwpq03DhwJzzeVt/ikLemOYmlvSRYDEwVAm7Vc\nXh2t\r\n=PF8b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3mDRIfQuSpnnR31oyUYHlua0aHkhBqvauctxm6pOprwIgaOQ00Dy63j3EfzmixMUGzdV00yKUcD4aXub2568Al2s="}]},"_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-bar_0.20.0-canary.8fd4af5b.0_1606955268282_0.021669333322331896"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.26d14d2f.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.26d14d2f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.26d14d2f.0","@material/mwc-tab":"0.20.0-canary.26d14d2f.0","@material/mwc-tab-scroller":"0.20.0-canary.26d14d2f.0","@material/tab":"=9.0.0-canary.ae27b44b0.0","@material/tab-bar":"=9.0.0-canary.ae27b44b0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"50590c8a7415327322f7e0115bead5b6a56b9d50","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/50590c8a7415327322f7e0115bead5b6a56b9d50/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.26d14d2f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-F4UQTEv4i6B11HgGoquFRduGEsheIFwid+xLwTUWAdO5mJG6W+qPqVR/ZxjuuEFM4Ba5P9AemxPo+bMN+pRL/w==","shasum":"352bf659d2f23002a3e99eb97717360ef554d53b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.26d14d2f.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDe6CRA9TVsSAnZWagAAbnIQAIVAJjavholdpPVZVt9M\ncUkL+++1d+ztqPoPrGb+/CCYz1DVRx+vxJbZgc9z5ftRqW7QBdVY1OMa2jbh\nYFTkdnVVcvxnyrfOcWtEtEUDm28/4kwaT1JhKYv8yIwcSGGYny49VYtDx1iO\nv7A7Gjm9g8ls9PYWqO60iy05sxpF4VLqIRFAq1X4/rS+/vDzx0fdgTK7Q81L\nx7TCKAum8SbRWrMoGq/yWUE5XRnMwcWYLZKXiuGUhCdJywAml7izn5IalinS\nqUe8Ha5jWEQhaukJrPbl8PzApqUcuuK149fffnaQi2dCKOisjyhRv4fTyGya\nZnTP85d1tTTSd7IMBq7zjca9famnD1TGnHYdnQxwEJwAldtNVgIU2Z1705Rr\n4PwE9OMABeefslDvs/j9SzV1oj3SyettFqZRKBmodX2vfTW4zvFkJbYVPhSe\nRq+cAn3X08vCEBNT5UhLM5V3aYCokIxmnNJq63AQ7oR7ie4uqYb1y7FuFjwJ\nIzBEYv0e/itNj7qiXg2XlBktyVAP0M/Yg2RZc6u/R7Q6lcYoQOevVxaaIBw3\n8RU1GhHbC1lRRCEvJGWRdhP8o53zEVjthKM+dw16Vj1PlKkudrPfXl4nBUKs\nsBMBkplxbcIETrGDYv9RBFdauE/6jOJ/15/RE9ZXl1PM+CDhOCisvQC7rAls\nTPCo\r\n=vOsL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQywmIa3J1rqBjo//71UJxyx5Kg/TvzxgGeZMPDz8mfAIgGZtHD2v4o18daF7Sx4Ag1ldcFesUbhRJpqh+3/aYxS8="}]},"_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-bar_0.20.0-canary.26d14d2f.0_1606956986393_0.5791887472235087"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.1663d7e4.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.1663d7e4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.1663d7e4.0","@material/mwc-tab":"0.20.0-canary.1663d7e4.0","@material/mwc-tab-scroller":"0.20.0-canary.1663d7e4.0","@material/tab":"=9.0.0-canary.11da3c0db.0","@material/tab-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"864efc8adbe583a57a2a7554cb0b3d625f3d52bb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/864efc8adbe583a57a2a7554cb0b3d625f3d52bb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.1663d7e4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3uDDml/jMUp53CndxP2Snh73P9tIqrnwS3sRwIwAW6HxUvwJBtF5TLtogBrcnbflRsybP/slnlXs872ySYV6Tg==","shasum":"109da66a0f3c7991124db50314f7f512f9a608e4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.1663d7e4.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyDyQCRA9TVsSAnZWagAAs6EP/jkCnHxnBq7v5oC4n4yf\nrWxjGQVPO0ZeXHjdCXTJyQCLZ6oTJzbLrOFE32+D5oNE14i0rnW3vXu1rGpc\nsi7ShkGz1bsHDdK9aK5LfAIOyfyKVo4pqOTyVFPHSfT2pxPgj989Ca7AL+rM\nC3eJ560eEOL+a9NwW7SF8Sv8hrtbhvPslX5/e5MnLUJbSffM1A67insjobON\nrrJrKO6mBc2LEb8mS46MwelRAG/6UHO8bxMqe8qetoKoKDyXTS4gBmGUa6C7\nKjeB9mGADT45qZd4wuzFhd3wcWZ8yAO0n2ftpjF8x+x6Lbv1gTfGgGHNM9yo\np3y/YGFvh6ecysOC5ln3C2BJOoTNy/vycylZnyNO91TUGsUL6M6w51O0Pgsj\nvHooo5rhG5t7GA+h+KNZZLuM1XqUTU0CGL99ltlJxnnBg2EaN6D8Is/crt8I\nhXwGRQ+YqAhwolaMJBi1N2mndCNszpQMXHBDvHGlzQ7YmPNpxqukJmKCNAkd\n0TJSCa6Q4PqvRhkyIdnAOhmDVqYEml0NN5bRVEPfHhkLscClUADAYVTQAUcZ\nyNrjDUiHwB7YdzQRfdPCXZnrm06rxvh4PBfsLHRBh8WBTlB4PMvxSZhDixj1\nhAXIm6iF5KHxEmkDcg6/56H1k692lMVFJB2WkedPqTMY/pvnnjdG3VdgVudH\n6H2b\r\n=CBIJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFEqmYvkXpP1n2EgLZlQSMkF1nxYDcQsZWWT7yYBkA2hAiEA8qIvGV3wZBZn7MMXzwar4Eu6AFftxuN0UHVHrxBaagQ="}]},"_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-bar_0.20.0-canary.1663d7e4.0_1606958224212_0.5476021227110415"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.cbe9fc12.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.cbe9fc12.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.cbe9fc12.0","@material/mwc-tab":"0.20.0-canary.cbe9fc12.0","@material/mwc-tab-scroller":"0.20.0-canary.cbe9fc12.0","@material/tab":"=9.0.0-canary.11da3c0db.0","@material/tab-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ecbb2ff521324d43ca1ca402e290e52618e0454b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ecbb2ff521324d43ca1ca402e290e52618e0454b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.cbe9fc12.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3jdAhJlvQXQZFW519ip3wk3DjgS0rVmvr2OcIzS1PeRTQrLmjOYz68xhLeYGAL46mAkDoRU6BEyWudq/JKXSzw==","shasum":"066971a117e6dcb953de5c48eebbbae433b5e465","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.cbe9fc12.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTeICRA9TVsSAnZWagAAY3MP/jiy8Mpl7sMQoElrpHdJ\nyzaYqEFfikIzAcBTaZDCgeIT4ypNnODohZG8I7N72Z6A9GdOcUS7YcsqyDBD\n5ycvSGb3GKa5jZSwJFmT/F6M2SrCP4S3/xS/GqtDKBtWfpxHX/YPX+uJJ75l\n8Eoz+qnWeuRcA/Cjd4LArkG5/m37G8GWZMbIUQU8HYchB1glYHIqlwdoT+G8\nDNNf9mW3dqzuwICjdlBNdLTbWPYHxm6kcfBFwPPFePFTXlRc653+IhQ4ZysP\nOu46Dtz6tbes+eEOO7Y7MUIjALN4Q8cM20LEVBjm2jYZpBdHpWRalxwVyjhE\nHWbIcg9DlxnwYW/X41sfR4HWuf+r5t7yFFFHj3BzLXsPMrNhZx5YzTZVSLpU\nDhqJly7jka3aUaWIdi3xqkTExIDwRa+/Gl3krq1WSWC2RhzX3+7TnjU+9MXa\nx3R74pN+XSTuU/BrW5Z4iROFnoLrCzBa00fCrWpMUM/wQ0Hq/sFDoAQS2OVY\ndOIcciF5t9uWCB7fI94SELXZtfpdKtrlSPVQcgjrEaHHltArkh7NKo2SYJHO\nfkgTIqLb/onV9NKrqXrGPHF41ZEaY8Hh3mbd+PyV+3Td11r5FJqTDbp1SqYt\nAC3wQ5yHSHMk+nMGkpY/RTGznzGD+P+Vj+fGNn4HuT8rqvGD+bXswCSoscBW\nwq9Z\r\n=k8rX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBkkf04l5jAkPj044slXEL7mCugtVKRCGZx9RW/gYYT8AiAFXBz94o+7lGb7a7dhXNqNvyk0ye0neqy+G+Xt1jJpsA=="}]},"_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-bar_0.20.0-canary.cbe9fc12.0_1607022472173_0.02392663624263447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.9755be10.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.9755be10.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.9755be10.0","@material/mwc-tab":"0.20.0-canary.9755be10.0","@material/mwc-tab-scroller":"0.20.0-canary.9755be10.0","@material/tab":"=9.0.0-canary.11da3c0db.0","@material/tab-bar":"=9.0.0-canary.11da3c0db.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"45ec0e755bfb97f054d48e3543837f693347d6da","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45ec0e755bfb97f054d48e3543837f693347d6da/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.9755be10.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-71c+p7Xh7ykbbG6jCupASFJ9Sa4GM4GIYha/F6YBDLnbly2MKYQ99Ql6/iP2CqPy+lFZWD+igOxaYbfXapMghA==","shasum":"3a294beb4c164e80c5158bc7898f10478c20e500","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.9755be10.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyTvECRA9TVsSAnZWagAAje8P/AoSvZQtRThQSfz7UHHr\nsFbYUGTQ4kkVm7JVjOysA59CvenyMwiOAv4+YCBeOms2njEwvYqp7y1UF5sG\nyyffS+++BHw5mqoCJIIYoOZnzb6U1aBELEVVnR8+18Ex83Qv5VhTD7odKqWr\nmy6NO8inhPHOyX4uqcpFwV6Ix49vME/K2tFdbS9UQLs9YDuzqPrqicFfXKH8\n8Fu2HoZOp29dGpbBg5giG462mMc9lvYwKE9MV+bGGFgYC3qkxLq+GkGB5TFR\nEVK3zGO2VVRR3dOGmVyZVjP57gZuEph5Q8rFqPbopa1Q4cqKIqOvLHywayIX\nyQRhfvRKgUsYIXSIQyztYl5va9fX8splAGwrPD6nUgB7O1gN6qNmQIKfuuPs\nEOxJJFqbFwBU/j+KZyz7zuWKko27Uh8MQLKWISjITWO0BFuHANVjF11AciJU\n601oWEByxA9PV5RQR5CuIIKUmgfkiHeOK8WDWyYjR6hfuTzh821mZ7hj8oZ0\nHbvFiK6VbapNmI0d/8Wnl7m+HT5Bu58djn7xmw4huzTGg2AB96L3jzxyxFbN\nDgXLRgBX2POz7njSWsWjF7OwBO/xubc9bOk977WuPRuTWjyYbYMKX4jYaTeN\nwm1pRWJEbTOQWgpihcf7Fz9g6+H521poIbyczKECPE/8woy8oAwH+y/pFVyC\nXrdO\r\n=l53F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGgHDwGWORoehnyLuHeOkEYT9lxsh3Vs5KKKT5UVMv0QAiBDnEGYYgUTNhVC10+4pS76UsQK3E2SNJfO92OikyxvmA=="}]},"_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-bar_0.20.0-canary.9755be10.0_1607023555688_0.33625752583010704"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0-canary.3f64270c.0":{"name":"@material/mwc-tab-bar","version":"0.20.0-canary.3f64270c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.20.0-canary.3f64270c.0","@material/mwc-tab":"0.20.0-canary.3f64270c.0","@material/mwc-tab-scroller":"0.20.0-canary.3f64270c.0","@material/tab":"=9.0.0-canary.1c156d69d.0","@material/tab-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"048e0b4e0ee67cb81910736a7dcdae5e949a5eda","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/048e0b4e0ee67cb81910736a7dcdae5e949a5eda/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.20.0-canary.3f64270c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WI9zsvuBZz65FPzsGHR4EQfdcxbNPomJN6FZ7jpWlPzMhWUQu9fpUIklKO7NB1ld17uwbuoE4DcoLaxZVnbPpA==","shasum":"010b6b84e29ad305621050f00dd70a2003cb40e4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0-canary.3f64270c.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyV2lCRA9TVsSAnZWagAAmN4P+wVXHKPB7VvxVdBT8k4b\nh4oG2HBOcVjnWanPLfyO+ha5OaoatovDVUHKQAxJ3VpGIfsPhT/lDJUROvPA\nmA/UAVeQzcwGNqkriyW8GE++35ye2wQKWmtxUOvPcj4ARM095RhftArXTMWx\nDuqWxtuH6mB42VEvBb3vCa5slj7f8qX7IkFHvxG0bEgyMbNMIbw6d5Yuz86e\nxo2PZkyq5A0iLmc7CAbhws5PCLjYwmFvatW965wZPaDV2d0gRUdI8/ZOusC2\nem9+OIVWy9wPhnFr5nJ0VIQM5CnGRZzjGqIlkmapQ/pjqW/5Tz0oRbVxsdtZ\n5t0KvjTCnHg1zqYslRFh9r+Vg/JPFhh84GLCVIo6IzTOmSaKn9mg4ts/YvFs\nDNz+DXbE7tHbRWb2GMDijLwmi2gRYNHtZjeHaZ1N45ePt/OkKZ4M87HUsk2r\n66lqOsqVzhbX0QIxw6peoCPme+5dtgYwgKQXJ5+ntFOxix48ava3TkoYZglm\nMQQ5UT10Gv+F2cIj+Z/zr32V8kYQHt6OAmfEZ+ahQ6TR9gFDXPKkPdlx0AtF\ncYlmVEj9RTf85I3WamPw76v2Aexk3bosRBR0C0FlMlMO0wcaH7FnPvZ/ePEI\nmnbC1kJgIZwkJ+RH6EgnXf6VYbrzuEyp74jiSMYBmayxchha6xYfieADVxK3\nzW1S\r\n=qUb1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDEiF1hXCgXhOI2Vr+XKwStujgRIoJYMnPMgWSjhXWMFgIhAK9JhNwF2DeagBZNp0uye4je0u6Cpr4uXaPAdoGaBU5I"}]},"_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-bar_0.20.0-canary.3f64270c.0_1607032228644_0.3513844851425245"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d893b14a.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.d893b14a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d893b14a.0","@material/mwc-tab":"0.21.0-canary.d893b14a.0","@material/mwc-tab-scroller":"0.21.0-canary.d893b14a.0","@material/tab":"=9.0.0-canary.1c156d69d.0","@material/tab-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d85f7378e0640c2cfbe4f96436e664222a4c2571","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d85f7378e0640c2cfbe4f96436e664222a4c2571/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.d893b14a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DXjkhz32vAEcwwC1W/kbExDCcyUoksZVajpYOQl9yohMgbhRVZJCebDuZiYetZHEGO5VBKoEAAmknpkpxhGfHQ==","shasum":"9407332240240c38520b85d588240b3080e96d26","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.d893b14a.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWYeCRA9TVsSAnZWagAAqsYP/1xJ8v2udKS+ee99ZEYJ\nwO2HPhITLM9otH3HS6rcQJNFlIn65noJ4nREq4JaJWzt126fJY/7pj+xGxjz\nVezxxv6ItiNHO5Vwpd//V7CxgUy4c7GO+XQo+e3DkTglTCLzivFTRutzaWb6\npU5SvInNXtNDjUYZS2YAFITe4iEp/ungw05Gkd2oM+X2kvwa5R/q8mKsBmrs\nbZzk5PP6BoAVmFo5j1Ou6rkMO3ih9NB6acwDlQ+2gk2ig+I46lQV50I9oC6z\nQ2g+lYlbF+gdrMFv7CbXZO3WrAN+8OgxDspabBIPFywkFeCKu4gC8VT9vyXm\nTNr2hO5zi4Y08x7C+uoqMzTrttf+EHVsvFT4XdUXtVERdz349/gHJdvfE5cN\nvh6O2ItfFRLbSnd73KhJ7i37WhLtoZoo8o8AdVXGTJAxbmgNQjj+RN4UFYOw\naSBMevtSF4CE3CbuX5DjFVZxF2db4f6MgubCzNhTIAFyhkF4i1lT8Sawlypb\nLYyoe3HmGfRcsL6NweUxVxPPWbaGwVgT0vZ+hzSw2J3+KDz5/q+cxRjFAHJD\ngPKg//tWifPPl7ZUaZqaAobU4VIuscF/TUGzVXzF5WjJMMToACRo2IA//Qck\nyP+XH+BgYU0i6T7NTuyUstez5XRmIlRwASoTaXrgWJ0NvUhFap6YJNwP8bDg\n1OCF\r\n=Zfc6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCRNoWOyNW0l1E16J3QBCqLalZb9LmwGO3se+1d1IJdMQIgJD2cNa3n9160upyOTvg7q82ZI8UrdaHi5PwzxiXUGPU="}]},"_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-bar_0.21.0-canary.d893b14a.0_1607034398257_0.192984775780926"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.20.0":{"name":"@material/mwc-tab-bar","version":"0.20.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.20.0","@material/mwc-tab":"^0.20.0","@material/mwc-tab-scroller":"^0.20.0","@material/tab":"=9.0.0-canary.1c156d69d.0","@material/tab-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"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-bar@0.20.0","_nodeVersion":"13.8.0","_npmVersion":"lerna/3.22.1/node@v13.8.0+x64 (darwin)","dist":{"integrity":"sha512-7iGFzVsS33m5uZXxeXMK1ag3u1drRbBcfkXbP8mp0rpIrhZNpCAOZkTpyXtZGx7WAijaCXPdKOo3MkHutqn6Rg==","shasum":"02cecdc1bdf20feeb85085c8138d0f6d933411b2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.20.0.tgz","fileCount":13,"unpackedSize":45687,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyWazCRA9TVsSAnZWagAAQHQQAJPp5rc5+CX62hTYym4+\nU/MnmLqCpMv3Kq6HQftumhI8HkehbRN0ekGyNjPKw9MjprmvWuGeCTDBQdAr\n4D3qZ5bjIJUdlVfXU6eJVmyReGYOOG9nKDedEOv8U6JBpCALioKFMUaJYpa4\nxdn1kcWiXCPnY/ni168RTc64QBF6lj9ZfeUvxH91NNHxcF5mSgSW+Mk30Rii\nhtEKk/gXw50BOogYsQfakUZwixxYNc0D6eWYHFC1YLFi7JGZ/lWexeaveQM5\n+uqtssCmN+DmGE09MUsr3MOGEYhJvud4nE2Hw50grnOFdbF1B1VKy9mGEizz\nQvDpSZ0x6TqRX/y36V6v0rovBS+HWjqqHI5mpVWXqYUOI325hd7u40mBQQL4\nZzB1dSsExQ5MrigV8+2F3xdI8XxEPophwXCw4COlg0Y5dtt8zr1zs4xFKFPa\n5jLVTEaZwTcSpw5yBwx5krwdGJQ3PvgNlsd+TqtwM1XLA+pGr2xY++Ghbc1i\nz3XZeju8rDqQBNOKP4xtVwV/HGAOnWB7mbN0/Dv9SPGNBA/RjtH85W7WUQVp\n5+8NDQdQ5UozWMoBcchwcoRsDfl2KwsR30uGOZ4wGg1DHjdAW4FWTIQPmX9D\n8RICFloew9yDR3T1oKdS647LHSMRpTOCwjSk4RnFX0xO8vsQBKwLy2pF6z6Y\nHF29\r\n=E9eK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8bjjjUejmK4bktXNc0sGv1lpebIh3RVw2p36oEikmdgIhAKk26bAHDgsGUG71wp4tzzzutwnq7ESNZRxgDawMvdIG"}]},"_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-bar_0.20.0_1607034546809_0.6436682529471369"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.47c7d7e5.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.47c7d7e5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.47c7d7e5.0","@material/mwc-tab":"0.21.0-canary.47c7d7e5.0","@material/mwc-tab-scroller":"0.21.0-canary.47c7d7e5.0","@material/tab":"=9.0.0-canary.1c156d69d.0","@material/tab-bar":"=9.0.0-canary.1c156d69d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"670d83aacd771290b76b657bfe6ee631865c037c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/670d83aacd771290b76b657bfe6ee631865c037c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.47c7d7e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-iDtPc6CRmRlHNaBTIPRYKJOnEpX3jjzWvIbGKwy3Xz1S+ju4P6Hq6xZY0sdvyXTm2Un+bbKy3Gs98vqBb7gzXw==","shasum":"f26dc84a7dc1de4fa691b3a1fe44cd3129a06770","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.47c7d7e5.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf088iCRA9TVsSAnZWagAA/EYP/0b4fk7W9C6jwHaOeDPy\nJrIH4/g6EySEIlkzeJgy+NSM8CEnfZ7s+7ePbXFW81+VtD0NLFVOegqBZRu+\nEVxZSVgwaqmQdsJs6xKnOggBKBMYUOwq0fJtklf4NA5zF43b20N7y6esGYNC\nj2Z6fHImjIATjSDCj/FyND0+UiNW+aGrWGaOk8lepnaQD/ahLZfgQIpelijK\n5NSaEm51PVHXIUScbbRw37Kl24IiwdlDS9knSFB1yPzOvJIhwkSqVHkgvg1D\nLe4MDBom32IeW5SbyYy4HW9y1c0ku6UO9zqvC4dwdF3MBeR/EPH4nmd8JDeE\n74kxfOSEdGxYWy6K8xgI1p9jrDm76YjnnyCDL0hihMkfrNWoCVzJulU1GCQv\nZGLPK/SbcxUM/axQ1N6C6x1bf57futqfvAyt6sm6S3PXRPAd5bvLhEpvfJGI\ny9IWfBUvj23he0ZodR5JIUzm8qWCCA2czxC3C3+uxW0h+sLh4xyrQUFFoAfH\nQhhP5D1cNVSQRUcCIri9EThHhWVuEP7pfmXH4GVOTs7r1B8lEM8rd22jqMeY\nJzr0JM6AyLtsw0+fFP5KIOZs+p3+aZ28Od/DW86oIUnvQf7iV76mTloLHa1S\neuuI6tEbO8YpHWt1TzBooWvQhl8tR+AYV4+lglVquoed6Su2pqv4Tlo5ez2J\nISCQ\r\n=dsYU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDlINlxny3gYsnnsWyNuHKTGeBL0ITZMQ4M/N9bacJx6QIhAPVB0prROdCGYRoycf4eEOYVXFgN74IohB5AMwX8ud/k"}]},"_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-bar_0.21.0-canary.47c7d7e5.0_1607716642425_0.9077444163803314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b304a78b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b304a78b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b304a78b.0","@material/mwc-tab":"0.21.0-canary.b304a78b.0","@material/mwc-tab-scroller":"0.21.0-canary.b304a78b.0","@material/tab":"=9.0.0-canary.9244508bd.0","@material/tab-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"44ea71b47f36de83be1e3319efa93b6fd3690c2c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/44ea71b47f36de83be1e3319efa93b6fd3690c2c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b304a78b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-M+e2YI7JA23hp3mjDm6btDD+ILDrUe/NvfsmiTYGxevOwiIlO5VbYXefRTHFYRE3BVgPRLST2pSwwQdc805vBw==","shasum":"727d751dfcabcd7d38da3db0c7bc8e90b6f38868","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b304a78b.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2RbaCRA9TVsSAnZWagAAAZgP/2SmUFB4YI+SCFiqWO3R\nWh/vXJFCqjAi188F/z0Hf3fi6HnLlA+Xs7S0BTleESRVxkiFkfpMgMqO5asa\nrhX1nwewIklqkcXiCL74xLofb/3CGBOHMi2wTK1bSWhq/3VpS408OEtIZYqu\n5C1X4ZWcWwdg1KDXceRp/ydGvwXlHlbDyrBsgqIiHBqAyaitxXwihTRhhAjB\nyw79G31qUE3q0ie0WEx4xNpGPI7q9H6gOM9jyIwTwGJhkV1QXYhsMH8M4Mfm\niy5gHW6uFgCpGYMw0RTO/qethhvf9xIp8OlwavMUQ0hXXt5/HuBlSSbiuSu7\nrxUEdfyOdn04TxWmwdXhWElsfe2NNELxt+qLFM6MyiRXcMkSbDoJY8rKhmWj\nIsKE38+FQbWrDHFkRhum8/Dow2BdlJBM+vjyIyVva+8kqU+5uIp9SxF0XL1n\nD+HA271hO3PGQzRtPatXgy1DETEX2OdN8JDaUZueyHfYT3Lt/CDJPMIKI76Y\n4H0HzQSQ7ho9K+0vhNBMycUiTbYXJ9Yb56ta2lb+sq0KlSdwulkiuavxvDUS\nYz24xMM0Z2g25SdJrKa/kI5Ou6MowQiSld1m9pg+vs34owXDx8fgCUlqYGTx\nc0iAu1uTMTU4boDNl996Khi66qRnvKiacJYdpZlAb3b82dbDReTCyoqTsPy2\nUU9G\r\n=xDOM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIIjLWqdaqY3hf7oo1/avnXrAxawpxGDl7Q11kv57uCgIgES79Uk213kStaYYmzkfE2Rx9V0+KGeiUcLWCy0VkjNY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b304a78b.0_1608062681873_0.7890892554070359"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.777c5fa4.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.777c5fa4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.777c5fa4.0","@material/mwc-tab":"0.21.0-canary.777c5fa4.0","@material/mwc-tab-scroller":"0.21.0-canary.777c5fa4.0","@material/tab":"=9.0.0-canary.9244508bd.0","@material/tab-bar":"=9.0.0-canary.9244508bd.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8e5f0e24042f2b54d3ebcac6c8bc11f89a7c1a1d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.777c5fa4.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XlBN2+e08aF5B4NVdyHPUQ1jrQ5NpcXOICvQpRD/d9H8nZOtN0Z9z2f9FNh517deLJRRyXZ/KGK666wWAVMo6Q==","shasum":"0b08db3e739466cff90dcbc0a9ace095421f9cd9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.777c5fa4.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2oIZCRA9TVsSAnZWagAA6T0P/RY9E1UEnXi+JOyYPwFF\nyN3Ngra4ezHxqCcUl1471jJ1pBC/owlPeGaHjYq4ak5ae+pLkGEsDu/w7sgH\nZdYEfnYpefEcLpq8TunHoxj8ojZn8bQKhou9bC7aduBmBaC+kSNFJDDyk5FL\nBtR7zO0XwkYq8vl65ZwcFAomhG7mU/0QYB/zPlaJUl1vsmL8wevH8LtoKA8A\nhenK8jW9z5hGbkT0Je5mwGGGzDKEZcdTTZUl2KqCCmNfipFJgjE9NjPLBCOL\n90I5u7JmjxQTqr9g7xnc/lLlsssiYyjVjeNSE5OFqTzDI8v1P7qcdPqBET79\nyz6ZOS7tH453PY848HhMWwcwht2pzEacFVR8UnjHxdSb8cTlkOeNXYUEZQYe\nd7hh5jVClorBeWldFB92LQCkHlecZMkRGjVxypKJIaCX6IBAPmj+Srj1af//\nh256CY7RoIcYbANorDN7VPgjHQXoBRIcn4fcbJkuUi8CCgN5Zz07HSghs9wr\nPRz5iZ5DkP1XxWtzOHQBVfg+Gn6b4Vi+SVQvYW3Dn4oeAmoPwToweTsSBOZ0\nAeKnSH1bvzCuvhHJYTrgvNhPfNPUispU1JMkw0wEBSt4sCv+PWSwWJt7+WIT\nvczpcJF4d7WsW0wixpvQkegdwgTR0Rvg+zJkWWO2GAfiVdFopP+X5ufqM4T8\nsKBK\r\n=8C0C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDHzl3mOYRwRGe+pB5xflIMr+owKKVIgSEOuj7+cOtCIgIgbVnWgVJdCDVsABGE3Ph7LeRw+1TS257mvqoJCbdAu0s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.777c5fa4.0_1608155673141_0.49821591500535023"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.635c7996.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.635c7996.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.635c7996.0","@material/mwc-tab":"0.21.0-canary.635c7996.0","@material/mwc-tab-scroller":"0.21.0-canary.635c7996.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","@material/tab-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a0b572136cec769df6b66314ae5710101b643ea1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a0b572136cec769df6b66314ae5710101b643ea1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.635c7996.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-3Yhi6GALbFny+GapWyLL49Q1zf6ua7MaBCgCZTTGFKS8c0NJZ8LJZUH9u+n2BkKaOSxLGKUTe+ZPrmoOkupCmQ==","shasum":"b1b0a571e502390c630c0926daf5443359a2702b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.635c7996.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+qYCRA9TVsSAnZWagAA/O4P/2r4I7yL043FnHY/udHZ\nG0vCsMcvjXfx0xa9ZQtxrVPmcwL/PV+R98+b5MCpMrdVrR07+fseailTNtcO\na4vnGIBUzssJ+JgUa//WFrif7no6J4UgbaXAGzCCDGp5B6pFAkClzXY4j4uw\n/CAaHO42tA0ODc0pe6oV/JxLWUSbjn1AJcw6Tms7osiqAogwE8phNCGz3mlw\nuIoiR7SWCffGipG+JBi9q2YFW9o5GMdLi8CtT+ke30X8gNxBi4oodeTwgbWZ\nT7XINVrE3wfhhHli4XhBvvtUNSZ/1vUJKHQnmtlLtVOWvnmPUjetJSaNbYE5\n8Gae39AZs+2PWju1kgQuN5+Ed4NztCChcTyWB9KPj6lZS/Hwlr15XvDMRA8u\n1KWk6c4ps3z6e0t4QPgAb50NAZRpWS4pVPQSzrxpplmfSUk+9dxUcCyelHy7\n6BRrjUktIirkb5aKeq8wgEbTfY0lYhUoomz9ZBJSO78QuHWPzhW1jWZyfAqt\nK7zsXo3MY3PWwDrTnt4FlvfHysnb7eFZL6wxR0S93UMuSMcrAr1ZduVuOIqx\nBiJqN1lUWcrJtdDNo+eGHHzlOxSP1DsGVoXvIhj+cKkTVT+c32pa9I6UlSYY\nFMUUL4szYe829ggn22uQPMmIlbJZMynFeRoJr5+ryc5ROA6XaaSbTaG+nHZd\nW7fF\r\n=EmXi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDOSki9DGVG34Hv7H6Of/M9YImIteQiushcQGz0cMEiLwIhAKoteFjPnRS+ympIeuC+Y0dAyWkUm7OX5Gxd6NFvBGxQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.635c7996.0_1608247959833_0.2213769960298786"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.20b0045f.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.20b0045f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.20b0045f.0","@material/mwc-tab":"0.21.0-canary.20b0045f.0","@material/mwc-tab-scroller":"0.21.0-canary.20b0045f.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","@material/tab-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a6bca4682b5b0bc23e8311853608b98f5594831a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a6bca4682b5b0bc23e8311853608b98f5594831a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.20b0045f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-TjfbL0FGi8rTsgmPJcPPTWhq0h2p3D1NCXgeA31gsIU1JJixySggA8M8tLOyHmBuL5Xh0HceCsltFfQBED2xKg==","shasum":"b4bbf73bc3641c32189f6e7fcd9193ac963da570","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.20b0045f.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2+6JCRA9TVsSAnZWagAAx1kP/3vtatB3PRt/h3RfrSSF\nb5tHlXP7D+LeZ0iEWWa7DfQicOq5LchOfZZQqUb3RAbvONvlihILwWW8NZ+E\nIp8fmrgUUl2KFrwNW9sEwqig7o8rHbOeC+P9DMyOVIgIxWIwTeYxHUTHR2W1\nmq5vDax3/qVrrRGgtxuM2jHgAYP45LtYA2fg5EHJaRRvGwUYIgulOkZJb53C\nwV+moxv7Yof2YXFPWpG+VCMOBgV8/gssFA2UZkUoMu7XQieWJ3G19hzk8guy\nZTdrhxR61vYM+PBLJ7UHpNCWzE3uNfq1lUHzwota5R97h1DSKkkwE4+VI5ug\nLLFgXvrXGjOPF0FxJsuFG5b7xVoKFx3qqJ0b9Ta2fyrNVEOLcn6woX0lWNYe\neWocxWcd2herDzrfB91MaLINHsLhEutjDGCWD3L2KavEpFNJI10Nh3Ttv/OY\nluQw3O76k0jh+B9gdmxb9RUZdckTGKX90V9OQi5zZyMpiG5/SXQKNugHarcJ\nS3K3iLzPffvKiG3TATn2MoPJxyanEFZvLxdZR+kXzsnaSz6+E0GIJSDkuPMA\nnwXWPAjWNVzwCNmyOEMKK/1Rzts9cpvsc4w5t7t9XW/S9fDWh7UeFFEmHncN\nP05peeJ46T4JkkRSOmirIISi4xYlKJCt19/Cp5JlMKP7POdhfgmZfP4RQgiJ\nQC5N\r\n=SeKX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEMZ1U3GCckev8Rrh3VMmFCngs2zsNEf8cWe1oMuoCCAiBHDCk909H98NSIyHZtf2/lg8tueNTnSFmyss/5NI0Bjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.20b0045f.0_1608248969362_0.890059428584314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.41f77000.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.41f77000.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.41f77000.0","@material/mwc-tab":"0.21.0-canary.41f77000.0","@material/mwc-tab-scroller":"0.21.0-canary.41f77000.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","@material/tab-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"59ffc250e9e7d85ede63c75495b12e981e365677","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/59ffc250e9e7d85ede63c75495b12e981e365677/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.41f77000.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-28qYcnJDvlxypPF5JBSx6VGznsaBevod5MUu6gvgoQGBN7naCuFkdEwqK/xP6XeAIfqMOVsJqA3D6JsdSBSnzQ==","shasum":"ccc20e5352c42ba9cb0fdea224f86227d41ea9ae","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.41f77000.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2/lkCRA9TVsSAnZWagAAmnMQAJkxZwg2UyfyMj4Uk5Up\nIaN0oRvdx6nmmhux3CDPWx6K6bS+Rzrx8ARK8a3VKDeo3/RmHCVMIvQwlubh\nxPxAN9Yt/93ZceorX+7rn3RmVgJhkQueHxByIgGcOIi1UVpkyAWGRkwKckCH\nftD3YjIABMWPp2qpT+WtQTI5n9mP0J8o3GLfSxNGak14vu6shDC6TxB+LMWk\n+yAlgC5x3liK4IUWr+Bj18RhEu18N0zBUP9LPfNm0cWq+A9vGYm3yBEAQd88\na0KTirwn2SjCiAa3r3I+5NNfUQNeQjHEBmlVFyK6vsHwYvii/9YTdtj0eHf5\nwTWJ5/WWvK47BuY8OuICxxds4wyUMBkfrtFWtnILooWYEw7dp5wo/KjJopPs\n1r6L8srarqjBPqLWjOY/bTaJsv2GQ78veJq3PxoIH9zbRbZ/cu9HaX6m9kmL\nUWpujpjqZfMfNb0nxcoz8GB5MJW6DhGzpG3ctyGw4KWEwaH+DIE6lDMgFeJx\n9Zy6fCM5xnR9FCjUCo0FsK2ortcIdj2Sl59iFutfpak2lrWyqa+nX6c/uY9w\natJmIjcPxst2aylEisijNfAVYzVBrv1nu9CWKnLNTlYC5SVgdpB5jl2/KWzo\nS/nmPmvxlxwF+bfJh7DlRKzV1LFfeuOeXeb4KQzcfY+yt+NXTpHe4cDfARh2\n7eEb\r\n=KTVk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGfLomXIYA4FVFQS6k7pHWAa+/gIKcjDsSRsH7voiyQmAiBQqYxX45CNAOwVs9QT6J4Ld8MZppBnMxvmuqBrK4VSYg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.41f77000.0_1608251747888_0.28860887561838466"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.afe4079a.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.afe4079a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.afe4079a.0","@material/mwc-tab":"0.21.0-canary.afe4079a.0","@material/mwc-tab-scroller":"0.21.0-canary.afe4079a.0","@material/tab":"=9.0.0-canary.30fdfd06e.0","@material/tab-bar":"=9.0.0-canary.30fdfd06e.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aeb3539e673debaa2381e0aa7f186b95e91ee563","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aeb3539e673debaa2381e0aa7f186b95e91ee563/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.afe4079a.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-V0tmQOyJcQE7dMF+zkzPlTZrezP4KaCwN1C3ZP7gFiy7jS3VKCNHqbuKvecv5FbWAPv+n52u/93R/NtbRBLzCg==","shasum":"739ce733cfe6781ef6294784d82d9183f5a38ca9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.afe4079a.0.tgz","fileCount":13,"unpackedSize":45756,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4i+FCRA9TVsSAnZWagAAzysP+QAw9PCOGk6UhtWIOev2\nO52v9/Wg54rsZC+C2g3waXuDnNuhMqB1KB1K1sZ9Jt5pYJ8SwQUd5whMcDur\nhPzTm5742N6AYtZeHgvt1B1e+w23Wjb79jf+y20cNYHdKErkuIh+UZKgKkIy\nNRUDF84i3nzGlIAPXR56BdNi3axnGpG5xj54sbAKYCWtIs3Z9E+DR9A9GIcn\n6NiSsK0+l9B8qPuwRcy5B8kpOSZQA41Cg7gXzmX+1rNxBIIgUqcGRXJd7k+v\nXifmKzFVSSZqPok6zhe3l9ApViI1fkQRHeuufW4MglgMCfjN4COdmVTNlBie\nM8N+lDM4ZwzLrQJ741mYam+Sdm0WwkpT8cCIrn5TbCW4z7V7WiFUKg0NJfNf\nJRRlyG5Or11bc8KxryF0bsNwaxpCUqzDbEsaKgwMhlrIEUbjVqKweVKuU7Sp\nIhT28QM0Ep4MaRlXhnQoiPH9QvL7hbclvHzZWMNdNHbk/lBjkIQBFCvlRHu3\nTCGuEUsF/sCsMJnf7TXdCbilyXtEKu2FOtTTxnZo6EkQXLd+j2DWhyPzzQzi\nvpmgLPc7N0TLZ/z3b/t6yfjDOQbO25eWh1hPM9nH7owF186FIzF6G8h8Cpgy\nP9zOBvCglrjtHS8Fr/ktpLV+P+qdlEEEsfAjW9Lg0k/9f30lBoYcMKWAq8Gh\nyUW1\r\n=/TWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC47OcfliFZg7XWjya9ms2K6DWK6OFTu1tuUqARQvB/fQIgVlNU0yz+1ANL/zEX/REH+asBs4n+3FpsXhsMKPm6s1I="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.afe4079a.0_1608658820828_0.7311912247348782"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.407ef8f9.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.407ef8f9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.407ef8f9.0","@material/mwc-tab":"0.21.0-canary.407ef8f9.0","@material/mwc-tab-scroller":"0.21.0-canary.407ef8f9.0","@material/tab":"=10.0.0-canary.671d72d95.0","@material/tab-bar":"=10.0.0-canary.671d72d95.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b600a06f2f54a052373cbcc038980333a8068672","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b600a06f2f54a052373cbcc038980333a8068672/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.407ef8f9.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-l83fhcKqDfT1ZI14vOtJ8ereLiJtWUJxDlRFfm9s4/ilW/sxiYvMYr/rBKsiZOYtKbkDJUUXaQ8HKMo6uqBQAg==","shasum":"e4fe4edebe29cb3a1149ae4aad6aaa364802c5f3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.407ef8f9.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7QcuCRA9TVsSAnZWagAAMygP/A5wnNQXhmGANd1VXTzA\n7m5yeWshCBm0Qko65gMDladpiJTHoEavDAwL1S9ACvOCE4APAUdRnmacOrX4\na26aRT1CEAoqG3/eq9rZ0N/UU3cJJnVRvdlxjSnSrn7Ejzeu/81Z4fdvqw8r\nBMmEuvPdRiASYyvmoZtU5X8VVcRLwl2ljC3NtxnZ0wiupSAVUzLiWmPlINMH\nXVIY5hGcACGIU/dfGA6fqvfUA364Ap/40Fw7aHnRFoeMR+wKVQGbDzvXBJoS\nz8zs1eGCmbpWIfTwJ1RnO0uIizxN/vcmZ0uGRO+tQv65KrK6G8UDks/l516+\n6WoPRSrHFCmXhfoRF24OPCZt7R2SmzVTO64yPSleZbSbb90JArtJr6SoW1aQ\nM0Vf0GxDpsKVG9mVX1eTqdAk1Rwx0NbT7fIoY9MAsI9p2sxwdsWNX6Ef6y9P\ngyxkTm9NzrqXspWKAHOE2ybjqaCKxTOCp0DfqmtK1BLsNkDGKp1aLCaxZPKx\ni+I8KW7Ekzs7kbzXIcnil45xSfNQ5ONuGHrnCooJ0pS8ABMQ6cKehSwhnI1S\nfwQOKfKRI+I0kvq42c/j9E1daVir5S4xRVFEJfWuN0JbTT2X9VpfTcSz5O6z\nNN+yNKzaycGNQMmtlYkgUtjfA2Qvfb0TiYCWrzltWtRnez55EB/6zvSykpaF\npNWF\r\n=SZsz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID7drxYItAcekFKifBRg6pyO/BR5puFpgkDU3Pp4hYQBAiBYiDWuPctqKMRaiNphIiiqGt/B8rnFT/p4yZ5Ts939Ag=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.407ef8f9.0_1609369390029_0.7196267541340255"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e26e137.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2e26e137.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e26e137.0","@material/mwc-tab":"0.21.0-canary.2e26e137.0","@material/mwc-tab-scroller":"0.21.0-canary.2e26e137.0","@material/tab":"=10.0.0-canary.365c69360.0","@material/tab-bar":"=10.0.0-canary.365c69360.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cd3d92f8ebc04ae6cd6d286c7983e3028e380428","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cd3d92f8ebc04ae6cd6d286c7983e3028e380428/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2e26e137.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-PUSlWd9obcOx/aoz96//s2MmxxLkFylqIcDTSLwGqRyhyNK8p1S9Nu2G0+V7Im/CbKiPTkajoGgwdpN5ysaPZA==","shasum":"4bf9723e871f7125f58723558399626bf619d561","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2e26e137.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9LTfCRA9TVsSAnZWagAAUUQP/jp42rKSYti0w3wbdGtM\n5RoJoZ3+eo9mn8DKuqAnUv6a59RFaPSdTKgseJFk7xgCD8V6/PEqLBLhE5IE\nZIHF707459b/YZ5jkPehjr29Yc7ZSkCZQKz15ueGGJCQWJ7VO0zBN9RM3jHu\nDfXWvZYzGwHqSoYERduThVVFQ7FE2QVqgrABNOEIISmqjtbdKBcV4ybif0M7\nieZ1G3j4nhH/BdU/ak98gFUlziyjbxXDIrG8/zMnF7CqaL2Z9DYeDy3NmJz1\nmmaOrCPn0rz5SpEs0GeDDw6FShip1QF7YmyKYW0q/rHQsEpYPOrk6X3RLOvR\nwioZTJ9qzrTW53EEVpH56o/VFA5mtK0zMs9HJHOUBOG/y68ly+1s8l+6Lr8t\nkLqjNJSJdPx0rPwt6gBjWRXMOiQ2MkVdkVuW1oNVvYs8ntGGi5wU3sNT9rR4\n7b/yg+dViHRRZQgdKVw39ASgZEhDdOU9cJOMYELELML/dP541UsmNjNPjC7u\ne4rfm4JLSeW1TDmiMjr6U4grU2FAEDesqiVU81+/VDBVngA3iSwc21EjUmTL\nfBvG7tVAuEcbsRfGvZJIXKn+weDMv9zXkkjuqobkffBLILYt6BTbp7bYmfq3\n976Dd+21ZXGZyusdanRKFH2CF6wfvVVNLrNQ+J9jCzSQ3Wx8l7dt7/6a0+jg\nqGoi\r\n=XQAZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCPOdUT9qYeOgqiWvNGU9d4u5tIsD2ek/m17UWU1BYgcgIhANIOiHiOT141w2Q/+p3KcFdbf+IWbC2z4c2Y1Um0ekiU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2e26e137.0_1609872607289_0.5540262173654982"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9009f6c1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.9009f6c1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9009f6c1.0","@material/mwc-tab":"0.21.0-canary.9009f6c1.0","@material/mwc-tab-scroller":"0.21.0-canary.9009f6c1.0","@material/tab":"=10.0.0-canary.abdd10065.0","@material/tab-bar":"=10.0.0-canary.abdd10065.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d6f3ffc9298b3af3985946aa3bdd75c862b5d8c3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.9009f6c1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XJYZwT0Iv0ZYVl0ct+STDfFnYhEun2TSXxjBZjuKow7G67Il19RbI24a/4nm0SpYj/EBjZU/O9h/QN1tPXTPpw==","shasum":"69e5dccc5fdb6fa77bbcd9c28674388268d00f74","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.9009f6c1.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+LiLCRA9TVsSAnZWagAAhCQQAKFHt8l5eXpfklaJGZ3O\nSNa8zdf0ylScDotpQtCmyRD7MGSkK1apiJs6oGUyfUx7qifQQlu1a7NiOslz\nEPX1i+wM2DrFUxrEoOwxYJ6KMUhIJSjgWThaBmhLKpIqZRNwb+6u7huswl43\nyEDmE5JdGnHuLucH6IwqVagDTgw7nAIPwFrUsGQ6TMMVU0Ki3AJ6odRoZkov\nLcBY3kHFfHfnaBhR2S41peTZNTXWQ1jV7uAzML1RUbEnZRo4t2uUsRWfOkgg\nKSktPbAhv4HOGJJAguoT9HDUc/jG4ZxPk0Y9W8oDXn8u9z30b+En9hhLtn9t\nS3H0ZXKDJTz/OaSxq42VienS0h94h3hZ6GuuS4eFxM1RtFcXYXKYbqJTPn12\ndtWCbkS4mKK4DX3F+582wmllJfVTPROYSHN0trR03ESO/D6rdz5MaGpbwLCs\ne59lDnds0YJWMuRf5bntCqWiAaXTmoesiw63zeCawqWSz67pK7X2Woez6u8o\nKOQC1KfSCqG016qQd5w99RZCXpLyrlAA4fG9yvYsV//VmCXYVb7v3GJG3s7o\nTiFIxxMiigMfDovmxAkGjKbU/2/gZFsb4TVlMooJXDyXTMybZ8OE64thiSu7\nJ81um8jbV0/FZyUOWAg8PCrALUlwhrqrciNztx5Wq4ZOeKkrWJ8SKCIGDOa2\nene7\r\n=upvJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDjS4AYt6NN9QwUxrRnCux8Ln/oIXkSAwjjdQA9Lp+b+QIgR+sv04GcwHWPXqXuO9CvS6CbAdTGTs+eQlKn7keopsg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.9009f6c1.0_1610135691532_0.9369758263255175"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ee99b646.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.ee99b646.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ee99b646.0","@material/mwc-tab":"0.21.0-canary.ee99b646.0","@material/mwc-tab-scroller":"0.21.0-canary.ee99b646.0","@material/tab":"=10.0.0-canary.b8a1a58e4.0","@material/tab-bar":"=10.0.0-canary.b8a1a58e4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3bf8197782f6099f32f339bdbc9218093828cdf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3bf8197782f6099f32f339bdbc9218093828cdf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.ee99b646.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1b4z13c38bF7RmXtUjEda/YsGoHNhQT0dXWgMSxQfVqx7LMmPBHper3/qJw0k1yQgocFKbXxD4nXUdX7S563uQ==","shasum":"83ef31e46d8e0f98c8fe8eb145e406312b49b1e9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.ee99b646.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/Np9CRA9TVsSAnZWagAA2bMQAKUW+2jCjB1roCD76slr\n+NBKApDE3mvognLirMbj5p+5qRZVMQIRyonwnvrfUH2hnxzF2czvU8pQBAT4\n7muh6lUy28SoXIXJdiOV6ZUAWRY/H1IeZ1Vq5MAtXyoSI1DIcTUYOU/nFjM1\nTKyou/ijFCy5S2Gn+ay81UVyFrS0/IMxXZN/qgDVdfc903ELPcolqb4UK2ck\nyIUEr9uyPSUc6k+2JITG/Q+VDVHofFLVSdnU9cAqhxBNhqUC4/qFLKqVKQYP\nQ4NGbzCuTlZT1A05OUxXTMNZ+Q1TpmzNnR40VUd+Y3kqD7G6cPfMWY3VBozy\nDwcEXURl/cY7oFpx5wOjKNIVXWk0JqnrsxGwoVuQQmDCk4GBZcbEC3TJ3BNx\n3wwis1jjNSR1VGTSQ67h3AEwPNCjMkEf8+RC1R80hdJHBTgYxKRBGIsJyGhJ\nMwNsDnvFkls/PL8ma247yzbicrOxamD+X9hsxmFB4b0AIkJMPoCUDH19uiCH\ntEZ5oiW2jZDi//g8DwMU9MBfag5UDPtK81Z6qV1yZ3Z29GDBMiGL44V0OpD5\niclJiy/rdpBOboOfCY+o3lvN7UYzUR7ddxCdrqweKEBfrmeTz6lL48s0oYP/\nOdDIQRh2u2+T+O1LWJ3S7q8UkYk0cSJNkiGZnYUrsUKdAPRTt0CHLAzRdx1m\nM2Qk\r\n=/Zfi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDGsqoUKGFZKvoTLICDr/Nxwtf3FiyPW/YHz7iT00rfJAiBYSrX0VPiCXpT2vpVoiyeLprR5K17HFvcuwbjaVb51yg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.ee99b646.0_1610406524799_0.548591908630027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.740ed33b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.740ed33b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.740ed33b.0","@material/mwc-tab":"0.21.0-canary.740ed33b.0","@material/mwc-tab-scroller":"0.21.0-canary.740ed33b.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"fabdf055e5efb9cfb69ee02c46f968eb33e417e2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fabdf055e5efb9cfb69ee02c46f968eb33e417e2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.740ed33b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-wo7DGW38gUhOw521PGG7oVM4Rd66l/jmLqQVPBKPRh8XevL5VcQ9F8aYfjuwi1rHgP0a/q1z73aMnxPP3COWHw==","shasum":"5c02127908458285add6588d4951805b765f93eb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.740ed33b.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/eS4CRA9TVsSAnZWagAAN44P/18yvnGNeDUYoEV/FQPI\nxJ8+pUo2R1smscJADiwjKqBnop2fbVp7CLYZV9sWkGAlu/lU3App1ELQNzpR\nnnPL5X3ds9t0UDf1Xbpq9HsdXhHx+yY5v3/1AMnCZYG9uiL2QchY/UJfDExq\nqzeXJPLjdyP2YR6tEzW1L/xCWP8U44gCb+XsUNom/HAv7bXS8TaUyrsSp7t9\n05U4MZcUiO9tFK/jeSfkX/iQ9REVYFPYqNRcB6I9RqrzPwRG9TDalV80r/mW\nwb7dN2UvEIKp93ZY6Tp2IXRCOI4Ji58f1fQ++q79x28DYyyTWNEorBZgVixS\nn7V1xfV1oYBXEeCwABoVfpSSgc2/xtVN24WPrp6216nYv6bvUHGYYRuxLDB6\nsHctOh0+Px7iPSfQI4Gv2BGy1yDJfYzK+w9XsRbme5x2Ey6ayrwTB7t7kAI/\nv5UoEKvzWUIvc9mFGI2jFJNFfTQbMuKCagfzpkDnHBL6iPMvvtV1PwHXZ8bw\nfRdQfHuPhKy8X4FWnXZk7v/+qqfpOIIoIQyq3xVNOxq70IWIn1mESs9kARGp\no8MFiXUrGywNQbd2Fc17lVIZ2I/zcgFC5kpdPv6s7mel1Ch163GK0bj9k+h/\nqMRS7+2wBqK5w/dbLP+ZZEiSooOQn0wj63esLNszlf8gXEnLOYPW3UntVaWI\nmBxY\r\n=wPyz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6wJ2onnimrVhUnQf73TfEQaCEA1qwmlF9HH/pnMkgjwIgPVXQalzWhv8n9Gy54JkhCmHHSv9atHrLdMmpn0JjYnU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.740ed33b.0_1610474679623_0.8927897276971108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5c541b1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c5c541b1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5c541b1.0","@material/mwc-tab":"0.21.0-canary.c5c541b1.0","@material/mwc-tab-scroller":"0.21.0-canary.c5c541b1.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2845f0e85b6a37bbfaf5110a5f16284cc8fda6ef/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c5c541b1.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-K6YLBrbwhjtQBueaxW+49S2xSCSiNM4Fh2B8PMDltRq0FHBN42QN9uoY7cV+KpwZH6QaFaeIFNl9xPzBx59PpA==","shasum":"4188d2e7f8760d40739e803b5e9e2370f87922f6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c5c541b1.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/e5vCRA9TVsSAnZWagAAqm8P/33aPa0Ee19W8kI6d4D2\nJjibUSIHcGdPh9nURnNdaXeoR+51PaPe50Wds2KNyNMOHNJxQYg55tFwJXBC\nkgN5Tar4l7PfHTnagh2DsQAKdDf3u+mmVKyWlS68groYNcakBge+2/9WuELp\nrCvwQaP7k7GnkUuo55waI/OcnU//yUAtKwNu/jCkBYg622Rgb6WBgA711Wdz\nbnj5x/0u+rxWT0j53yB3nTD6J3YLYlGAd6XG+cV2LS2AbBoqehA4jdLA0a6d\nI6lE+FauSdbgHq7eFWv2F4ono5IbLXQJxbfXXkzRk5154yzhxwCBiSAgDIsJ\nmhU38UC3TJXObCogFq+lmCgG8higdmn5HvoIZ0Q5ZKq0GRcOKPhjFAxknr+Y\n8u3evu7riYFiDZiTJTsxzvNVbmsoc/jXqe79ww0XS1QUI3yyxJ6a6ral55zG\nfU8dOdeS6mfZLMJh4iBz6oPOocPa/hdpFJDT0F/zKH4WvbQCzwSYU3biTUtH\n/Z89V25HqLDdWH1jo/n3CJz5b+6BPGAZCt2yOqaENU3zJVBcBX43dh6AZYbV\nr55bLNdgfixrhTbPSpK4E6kcqjebtW+Kd2b7abxsdZFK7QAMSEvFl/IhFmef\nHdAMpApwkukxAG8t0xeki5BtY0EwmslyfU80/Jn4sHePi7p5E1S0j6NdTCuw\n8+EB\r\n=1T92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHv3hCqJBr2l6NkLqAwS35yqjD/n56O+NFTsO0I/X3xaAiBfVriVDDSGPzKS/gpRcsyksIFMPZsfBgeE3pSQ7ze/bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c5c541b1.0_1610477167380_0.21784089532078244"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.06fe9d90.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.06fe9d90.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.06fe9d90.0","@material/mwc-tab":"0.21.0-canary.06fe9d90.0","@material/mwc-tab-scroller":"0.21.0-canary.06fe9d90.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"99a3aeb2c1659185c9597a59e5dc7599bbfd52bd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/99a3aeb2c1659185c9597a59e5dc7599bbfd52bd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.06fe9d90.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-VYbYUxHun7OMqqjvR1qBu0xiYUG+A8VAI6Lu35b5sreki7boxRshBXhfAkJUKWrhHT8puOHUajXnlu+8xkARYg==","shasum":"e9b3d9b70dac20705f33d12af9af74124a5ddbcc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.06fe9d90.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/gzGCRA9TVsSAnZWagAA+NkP+wTl30GLCAtN+gXk5H9P\nHdJuVX9cau4POGcVal0NmPY3XhdwknMpy4K2gKw/j7X5VSPtY38dhIrQxKjq\ntyuIzuDaj4gm7z3FAVoyqFZ9rkwotZTXCp8T+AO468qz20dFYcJvjLOxstWv\ng5X/6i8e85KBFiMMrTCGOqvwayESKtYQjwXge6vg3CXsaUgjp+kOtwa5bWuC\noX5pfNOx2F2uWBJcvGXnBlbU2dKof0rKzsPJtmThnGjVMI40qxd4CL/sjCTP\nFlvC1ekaLS/gk76Ce5mTL3YzJtfMVeRDi5csTXQVgaIRScPbeCLtIB0NtAF8\ndeMn00YmZwZKYP0k8TlTnmSNYe0kfbzdjjvQz5Rj5QMBG5DXpPeKpoDAegZ/\nd2v7NAYXA+C0F571p/QAlRCOzOKrhD+2ooA2PCO/NI2oAkjNUCV9ykJhCcHm\n76S8HEjfFFmwC8/w91eMy7/lqptaC0KM5lBhEJC+H4HxNSvZLmSFqwczA7G7\nnfWye4g0hDNRgx+ZhxfDUCERsNg7svezzheScMR9rpGF1BoO3FkJZrXvENs8\n6io/aL453ZlWv5zbvUavrkm5qwY8N3kJxSqP/4FiQuMAmkgoo9MaRe8/SbfB\nmKQHyBqiUwvVUt0fo4K6PlcFUrJQOiYdiQfH10hKyOD5QR6O0yyR2CDq6ZvO\n09nQ\r\n=fsCj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5oqhLBOE7BT+UdpKuBI/wmkAaU0RRiHx5LCqIC81TwAIhANxmSzcbn9qAusaFxKYeLWCLfNZu+Nm7nGMA1AnYE/SM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.06fe9d90.0_1610484934159_0.15165760630487313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.269eed01.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.269eed01.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.269eed01.0","@material/mwc-tab":"0.21.0-canary.269eed01.0","@material/mwc-tab-scroller":"0.21.0-canary.269eed01.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"537a9df54fcb929f413d5ba5af0dacf0e2654c82","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/537a9df54fcb929f413d5ba5af0dacf0e2654c82/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.269eed01.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2O/6f6TCkgQuqPxItkBXeGTa6TRscVKdHmHmG4ieIT/6sY725l2tNenI3e4chvU6N5ODmQfyHzjiRTNKfQyx/A==","shasum":"f0aa46799d96bea0ef5db579e94cbad1df86f6c0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.269eed01.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/2oXCRA9TVsSAnZWagAAOUQP/R3ioNFKiTlM46fkXogk\n7jGHIuktW7Pf37xmnc+roWRZs5nOIdjERWPzdB5ALeDlreMgWIXr1SY7rhpm\nKVG99Q0EmZAtEMJ46pmb6bCJ3NnEeCt5kyx+s4oOcRmG6/GgSg1iZcnbkJ6n\nRRwnqqfRlLe3RVXAeAtxwuuXfepCeC8hfqdhEHx38fBQyVWnaJPrA9IIFV7P\nnhrZeWzAKoazx0eLqwUbh+E8wSS6vLoRk321qIy+pMF2c17WexRFGVVTBFih\nRjmkMUR9x2JkvEPYugQ/A8VopWao2K4l5PluAQu/091KN8rnvQRphg9LfQ6I\nT/Syn+QyPpfRzHRLJ1itY2K/A3Ul7BAdFoY0nvXr8WYmAqmSrlHICvbPEQ9N\nbNw42kZWv6iLVS5oji9d7fdyXRix4S2hPnN4e7xthhlE4fP0z5BZUOvM4Esn\nYR0mnDmawwARdFgc6u+89Z6ZjHEfBWBTBwsHlcTOetgucvBEbH9PtHzEgdQ0\njUphuNOMyq0NRtlORlfEaKYQ6e7tOEd1Cj78lkeM/gZJ0RUZwUAQxl7zIzHf\nXKq1rMn+oCDoUqpGrHIVNP3Lo5LSEjnm7Zr9vIbOmL9vl0jr0yh6JB5kIMJB\nhM0tMH+dciVWrf9E8DSGCIZ7eJN2TbJNPFQRJgWkGpURhEZz0uIJb6kt8Sdx\n+vSp\r\n=dbqi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHWPC9ujU6SR6/kNAnFWf+Fzs6vk+yISqAVgvXVQfgtIAiEA8WnVSu37mxEq2cp+dm4gxA9spiTgqOzT6jcmr1HsVv4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.269eed01.0_1610574358755_0.4480813139933697"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8c075f35.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.8c075f35.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8c075f35.0","@material/mwc-tab":"0.21.0-canary.8c075f35.0","@material/mwc-tab-scroller":"0.21.0-canary.8c075f35.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8757321e04ca4329877d8b8c9924f78bd58ccaab","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8757321e04ca4329877d8b8c9924f78bd58ccaab/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.8c075f35.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-XCJ52vdKDPAaf67sxkC1gdyhNrMcCb+3WKEveimElK/WxIPixQC4ZUnPZ/IGk4CCQch/Pdx4yUtMhGhzzllI3A==","shasum":"36dd9254594c2d3cd967d20aa404b4eceed64b2a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.8c075f35.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/31ICRA9TVsSAnZWagAAvRIP/2x+hvLNw5dG+11HFwas\nV55/ABKrnKUx/XmD+4yd7ruJiwA3WMZ1YAqiWHl4w35S6jL6lFhIQYgFIwLc\nU2yQyhV97XGEJtbYUzVrgYmddlsrsaAM8rO+bSA6RtPl84W6viJHCITfwuWH\nWNrzOfQkBjzmWtCM752BPAeyCqTvbvzHQy4PAr8vdwyyy0Lg1cXZ4pBw/TYy\n8/YSNHR5v2vfhm06c6aorJEHidygTDD2IIJepN/A8EZS2YAQISbk+vWez2Hn\neOVyVCQ14T+/2QWvJettUp8VZ7USr7fHMuTOIpy1560ZRbdiKgsz9h/UcOcw\nv/kCYsUH8BeVmRAV7AE41PoGBohZ069c8thnbjvNYQek9XNDlohZmrvpnpNn\nEsAoxQgiOeCKvzK16l6fvMgNsCVwzBTQd4M+60Hp11qvh00Cr/U+mae+3PY0\nM5/OTewlRYRHzsl4SUGx2QYfrd66fxQEOcNPaH/XKCtPXhsn+0OK+M2ssB1n\nwVDFKQFD+4rmF1F7TQdStk88okmOJVethprEAiUybc5F9/jqUIhXx0n4fVpO\n+An1dar5P9+w1DTEbkcXVCmlngBaJ3H8j0WLTpPYAwQ86UqksrWDbP8XP76Z\nHe8SAMxP8Kv6n9Yr5l0UyT9czG5tMsYtgqQj36ipCE+nq49WjScYAJaYAcn+\nXhpO\r\n=vYPB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAO1S0aFSAecn1nDSezGlkmCQA2NGx75IG0DP7xj3z0NAiAEgQ1rlfjffyK9Q4IFB1exGz2JJ4ioUiBk4VtYN+BNkw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.8c075f35.0_1610579272371_0.47831080710558815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3cda381b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.3cda381b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3cda381b.0","@material/mwc-tab":"0.21.0-canary.3cda381b.0","@material/mwc-tab-scroller":"0.21.0-canary.3cda381b.0","@material/tab":"=10.0.0-canary.7584267ff.0","@material/tab-bar":"=10.0.0-canary.7584267ff.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d660dc72de8b9d23247ab075b6f4f44053c9cb70","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d660dc72de8b9d23247ab075b6f4f44053c9cb70/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.3cda381b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-WPHyy+xs89Cbexj87sWwJSCi6DGkLXIdwuMcI9Cc/EXRtqXo2PK4F87BCZXisCW5lX0iAA8bK0Ej/rBojq7OmA==","shasum":"0e7256338499b7b42051b13dd86848c61251fdb1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.3cda381b.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4q1CRA9TVsSAnZWagAAcs4P/3/gK5UOUPJpIqb5wvvB\nMEHcLKgiHmWLR96YdZogs+bFYlelqpyYdIIAw+u6nKtU1Jmd9rLD7jQDFMzA\nbrUK2nOQjeDmc2TCQkytJh3S6Ug9r5tznRSV87ly10IAL1pmOd3j4BJbX8h4\nJ7Rt0ekPtvVPMy5judBLZ27fcLcqroHNu4q8Umlr4wHo7D1rYfS91h0YK0qk\nD0XYRWEkX/a5up+S4NizpyU8HCx5XVXtZHA0GuEU7JHnCGCvvitIfzQ8sJQa\n7OuqUaJafiryPCAby+r+32c9H2pIL8/DI8rvFYRWGqtih5I5/yb/8ixTMTWt\nB6GXvDv07k2KC/GEdhgmIE6ZEKtkecr0MT5ZeAfePXsESxNmaQ3TQOZibyPH\nW/CkOaT0/05ePXiSTAFbZqHNz0NZcMS88+pyfji2kLljFNH42AfwcU6Oa6XM\nhPvhHfxJAQBYXWsk32H3gMrYq7S3rYD3PNtDKsBAnuCWdFNnSqX8MxQySBK1\nxA4MEQK3PFf6j9nSG2vxtN9IE96RR5s31GBoYxmAgLTdEKQM9dLQsKWOhmeC\nIILkv3rNOkySp3AXEBMTB8l7sK26SWZxSgSsLGGJPG6xAjQUpMJz0m2Evrs9\nHlIBOk3JURjf7jRa8XoJ1bJuKxU9ClYgTviOShI98HTvC99DdHjCdYmRNfj2\nwdpC\r\n=lzA8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAX2IXf/djHvPlOmKt9gkV1hy0cOg8m77BXLDHHiEqpCAiAUb0Fx9IpTg+qzSxZERErKtlOOEI3zD00WkG09p/egKA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.3cda381b.0_1610582709098_0.9331864043603573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bc113605.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.bc113605.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bc113605.0","@material/mwc-tab":"0.21.0-canary.bc113605.0","@material/mwc-tab-scroller":"0.21.0-canary.bc113605.0","@material/tab":"=10.0.0-canary.772cc1068.0","@material/tab-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ec7a00c7b7cf2145c971f64e88b375c09a5409af","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec7a00c7b7cf2145c971f64e88b375c09a5409af/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.bc113605.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-jjtIRywlEs+vVdkREMe7N5Ob/06bcqjCdGRuOG3OajnwFEjfvGyYg1WS7JihBYUgKUobzNzBqR/Hw4YE+wBxUA==","shasum":"da06dfbb88d09dd7b95557bc868c073e7845aabb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.bc113605.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5RPCRA9TVsSAnZWagAA0VQP/0/DOpwyDVcVQU499MXR\nJvvXa+7Uit+rVuLyMnL9d8Mux352JBAAp/cUYvWDKEV9+sHPGtQcm1cikhPO\nANffhiM1PG7InsMYDByqK2sOprrC0LjjU5X/WGwa8saV0OoUn5eKGjro9ay4\nPYv1UvjV9Dg59EbHKc1/oMPRitCrAE8FANoxHyN6/G5Q72ttPEQImhleSsJw\nWu/rFv+8ZGCk1JSdQGBDC8de0ML2UeaU3iHaLdXuWrvsLygbx2fgpHSnoRvK\n2q/Vtau5OwRoYJjyeM8HDzZRGU/U5goQP4wL6GQWrARC3Brlftx5AU44+OAY\nmbHLJbFhyx/+nWpa7fVkfyEmuXkR7tLlwGRcXCFuvhXaES/SqirGexljRotd\nRrW/mj1JP1Rp9TfDyVfWFisJKs2FpQTsVrlcWweNQUhVbe9FiBfRMjcnSYHW\nzhWjzGcZBrOGmkEpembTwmsj8gk/T/UIViXBxWv3vNbDQEPIj8YBSTyRdsKu\n+t2OogjMTICRGNjIoLtGBbdnn5RANekvLmPWpbhrRLWAAYvjHr1TCclh7UyO\nLBzi+iBZL5Xh3zHe3EcaQMCNw/ibbJTbLxyHbODE77aE1sWjY0blLdDABKmJ\n8W5cLyDJYZ2bsG361ms3yNBf3/fw2ZUKWE5+5xWoYlmyMbQlmk1A/GbP76mc\nI8gY\r\n=HZIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDN92QiRA8TYCWDhm9L3Ol50umWq0/jUl+SDl8uptpC1AIgJKbZC/bS/BQnbtqIVx+GVmOnCVpa8whMXu/P22eZ2gE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.bc113605.0_1610585166563_0.1714625311736766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1d6ff9.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0c1d6ff9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1d6ff9.0","@material/mwc-tab":"0.21.0-canary.0c1d6ff9.0","@material/mwc-tab-scroller":"0.21.0-canary.0c1d6ff9.0","@material/tab":"=10.0.0-canary.772cc1068.0","@material/tab-bar":"=10.0.0-canary.772cc1068.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5c7f60619e642de2f6951662670ef490a6e46e70","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c7f60619e642de2f6951662670ef490a6e46e70/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0c1d6ff9.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-C/LI76Ubkem+A+9VKcLIin+qY8bczNvMF4adq7CmXN1ZdJATeiYOXlpWtwKKzFBZROXjInA3GBtELxSmXrTixw==","shasum":"8cae18c22cc00d62b6955f5f714e9b41654f915a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0c1d6ff9.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAfaRCRA9TVsSAnZWagAAdV0QAJJNHq3L89+sGl7W/2Il\nsVEbcuwCEd9nIogEGeSW+Vr0OF7Mfr8wxrSbmtnKvz3zehQyx/kvlNO7R3aL\nnng5U7pG9905wZK2BwiiV3uwQFzeyBFdjcmax583bjA4todYBMayca/hkzAm\nWCpFpV74jmPk0OwP7MEoYiGZJs/n7cXygO+DmjC92SHD3rPXhaUwmt+Dw8j5\n3h+Jm2KF3CJ6Vj+CxCffAH9upNkyGxWaTjIJzR2ZbmtHZV8dGMymoswL7bzy\nlAsUw3NoytOb2LyzxmFwQtLltZxQVybuAYyKylJvRD2kL1QLAZWFHsHFPLrK\natDyTF1220W6IdXUydgt4zHhH2ovJspdw2d6aWCzq6k22r3iY4PlSK4+WCBG\nurefBqZw+FesoE33svvM8VUud/4cqEV53NTuRhtxMYUP6lVRzapo2G82pzje\nnD94mG/xGAxr8tl3bt06+eMTOeYq8n1dvIbcD+czIA2C7JQUY6wF8wj8Fw6R\nTPnPSgGabFjNXP6+0GNZW6tG0bJB41xBI6X7lZGN7gQzUTi93A8T5aSyHoD2\nwPli4uTMs/rqF6JAuHslAKdGAS6NYZHsII3RDwHhqB0ox8l4uXd5He2EWeps\nQlcxH9ozQBl6CoxWldQiOnSB4UknsoXCaB5MfyLRYV1djBxbGBWDhkSlfvzy\nF0gp\r\n=2h6f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGsoFaZ52HlZGAuEQswcfa/dJePJcNbSmFaOkfP0eLmQAiEAuBtsCy9QGSFlImfNAWrklG6ECdqXmlgKg4pC/JHDD38="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0c1d6ff9.0_1610741393465_0.8804561068725467"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b4332e00.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b4332e00.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b4332e00.0","@material/mwc-tab":"0.21.0-canary.b4332e00.0","@material/mwc-tab-scroller":"0.21.0-canary.b4332e00.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","@material/tab-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"823027b19badea63e32aa35bfece324daba62e19","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/823027b19badea63e32aa35bfece324daba62e19/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b4332e00.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-r5j4CmYaVP4sdwPMDLxB/ucIWhEfmqZF4hixYZg2UMmg5R1arLJVca19JUH1FTTJVeRiY4pY2VyAhoiEqHBe7w==","shasum":"182c8715fc76422ddda4d057eaa884f3729b4add","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b4332e00.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAhI+CRA9TVsSAnZWagAA6i4QAJWL3VUKx2uqa/SPvY6u\nN2VrMMHLa8uMqJ9Ey6nYKTPbClUWvrqoLF+HWrVruLNAWO0BrbcMDgClO226\nw4rmuSi+JQyIwTwiQSJZmTfxoyoN78GPull9mPXVW9Gve1K/EKO8SfKw/S81\n3BYPwVB18S62lJrwQNqDP/qHvxE47OjVPBv0Q2Au3cE09Sw7QYXhzVBJuQTN\nW8uSPP6otIMneKFB4gq2poFk9Y0bztYJGLSHbwO6gzgjDZA/EpuoT53anqU6\n0vBgITd+VIKfYkUAZQ32naCw/gbWx7x/I93G64xA5vF3TQlRexD7IhjQyfZm\nnh8dW91FlWVzOhAc+C2lqDjlKiHWZ3yMhgKB8x8DIeK1Eu/qiTwTb4pK1S2R\n6cpRyTJFWjzDR1zrIB867ILRq5oNtynmQoq5rOL1qoXvTqwWDQBJhzcqGiMY\n6aQGO/VZG0TxBy/OzSOdcwMHpGRiNwRoiHu4LWrmK5bEuSRBkV3cBpbIjs4U\nClh0V7tSfhAAXUDFXT0kOoHTTocehZLfscI1O2jL3MqwyIONNKwfOqzdHTWy\nRth4mKZmtxZRgsIq6ubJ762Ik8gJITqBHn7gtiGcAUFgPHAkWZImimZne/QI\nL/RYZQl7WJASWLtaco1oybcLqYBlmQz1aQmwf0lgTKPT4/WFdIDmRNcn/7+K\nNWxe\r\n=O4h+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHlWxxNohPGV3+2Vx65Cy+4VXGGjivAYlseMaCUmldbKAiEA50qan+96QP7C8VPS5qbiA1O0j7MrEgxxsg3JuUYsCSw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b4332e00.0_1610748478404_0.9250505205328166"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2899691d.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2899691d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2899691d.0","@material/mwc-tab":"0.21.0-canary.2899691d.0","@material/mwc-tab-scroller":"0.21.0-canary.2899691d.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","@material/tab-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ad2d9fc5a5b47298a72fb5fe6e82b8c7c9ab8e44/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2899691d.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RD7S/L86o/SchFUmxZt/UQIGOFg9u/rqX5YWD6gjZAwO4Nv1BMP8aCsgcmZf+yrRtEekvSFs7o/erc/Y8303bg==","shasum":"b739925cdeb0e668f224e56e0a13062a498ffe2f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2899691d.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgAkUlCRA9TVsSAnZWagAAwREP/RTjSjpEtPBnMuwaAg3w\nq7AXjKdMM6uirhbSBlcB2TQZNpS7GhruICjXxWd+2Spo/4m74Hp5pHzWC5uB\n7Vxjun65IRWPzICp866BkGOd05VRnV3IedgBoRHy8G6AnRnpESw3iJB8t0XF\nv0e8xe3D1UvL7SD+XFd3CBMI9mAlfWWAckIgi9/5BAoj1k0EJGEqcQDyoPZf\nED5tpSh5U9S6P9YlGvzIL3HLvgoF7ki2cdhBHAlX9R6hunvdr3l523tFB+8e\nCyOLcex7eEcRjr6TiuHbzUmI4MBz9FqJc22zA8Ptr8nCRhHJOYGL+XQcVP7Y\ndFlqaF+hF3a5I1yE2Pf4nFE6YdOYvGkTF2ahTLIh2xJYwCZfqaMWDsSztaUy\n5SZHeK/MRb1S+dU/Jj0sV+b2odZf3RVWVbExrUzWzrsifBLHU/xZ5BIsyLuL\n5vu6jnf7W4VA4fj3lv3KrycP8UttqxCXL3cXmlLAeI16fvWOSBzs+lFDdixO\n1TNsq+i9pBobjwU7tOQ9vfcQVOqYcz0zFLb2TYMhM54zah49VzkhFVD10Jkz\nSXELvw0Lisy7q/+79BV7byjmQcqMVWeW/vfr9MiUSZgMsjxqzoH/XoxWyQQG\nLx+49PF/nc8z4U+3Z2AGrsKrFVqUtZxNukGKORix6A/w+uOhG/wVTwPSnYSB\nWMub\r\n=NxCn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDM3TN62SXr5TZaqMFuNj5T90Yln9CM79FAA3VHzcMEOQIgGoKcqnJB4SnuKFGLcNpglSDSHvr99GuORw/XRz+tw/M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2899691d.0_1610761508764_0.15034845178121947"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.fe73953b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.fe73953b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.fe73953b.0","@material/mwc-tab":"0.21.0-canary.fe73953b.0","@material/mwc-tab-scroller":"0.21.0-canary.fe73953b.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","@material/tab-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2464e59ad6a1d74aed7f8ca3477c1f8d244eb8b9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.fe73953b.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-VdRzO9pzHLvKw4OBmx6lQiwb8VqkJqrcSGxbaE7mObGMRQ5NoMyQC9zFA6W1laAq7YIjNvNq7NOhszrPLJx3Bw==","shasum":"15ccc60ede5a244ef2c647e02be9af3212bf4eb8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.fe73953b.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzFVCRA9TVsSAnZWagAASlQP/23/77Iq5qEN+4WZSf8s\ns4G8HMNCE4+yyW+pD1noagCT3mORXA+Fi+wzxWZP9C1t95hXgU72Jdzvi7PZ\nem+YHgh/U3tYgalbr98Db1rwRXYjGVIGMwtohJHMgnBCtbjOMcQWfeqNNUos\nGRFdhm3ose8BrJh8fnvcs+VQqcllrVT4iHAk9rLGc6Z7Q1wDyCgN7MLVuesb\neaNWUxGOj4sHlAPjP7VsAJSfHR4pW1HYpK5gJ1Z+wfh94XaWlcLt8KCnj1yS\nYc1WN6x2zqwCK0UtGNIKQzpsgnhyCA9YcUeoxzOC1JKULs1/y+XhXUuSDKPc\nJZ7grXtVcZx561vER1T4gXu+EZjuISK5ghFqecxpcVvZXIalCE1plGzBeMEp\nUQJMaZEOnBhre6cTP3fTgiHR16VNByT6v+cCXYDYnZLBS5z3lctP9z48akXE\n1FIZxMmWNjj8sk0tMgCwVZ09SwA1/02nUwnXRLS93Tdr1rkI4aoeY54C8L3v\nAFTL3+Gvf58nAHKxaCaO6DG6/zb8X8bOMurFbX2Hd8UWoTA6TISnKBGYokun\nwqPRdp2+WKsBDbLShvPC7e/PtBL1Z4L2VZ/XYjeXFSUd3FwPW1i4TC53fRED\ngHGsT2QRfJAc2+U4QHfNvnialNMlPrW6yRUGyaEDlb5jXGDRSUNGTCBihnPR\nRzfe\r\n=ntE5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGary4iPYPRUTe9Qnp6AaTOA20mxXHr2lIVAA2uczFtuAiEAiBk8NPQSi01lAq1dc3EFwOSSSFzZ6gADFTUuLFccnLM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.fe73953b.0_1611084117077_0.979811815620236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d3a16455.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.d3a16455.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d3a16455.0","@material/mwc-tab":"0.21.0-canary.d3a16455.0","@material/mwc-tab-scroller":"0.21.0-canary.d3a16455.0","@material/tab":"=10.0.0-canary.c7c5da28f.0","@material/tab-bar":"=10.0.0-canary.c7c5da28f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"cc074ab80b57efe95502e551eb4d0ce6a153094c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc074ab80b57efe95502e551eb4d0ce6a153094c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.d3a16455.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RgG+gQQrPsqnOrhuZ3ERk1dttkrXtT6iJCav/vG2NFNB/pYk7P46Jebiaw/vaygOLNK8RpeCTDaQBeENSxA0wA==","shasum":"1a0944b335bbc2031d6ce61ef5119948c9fbcb33","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.d3a16455.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBziVCRA9TVsSAnZWagAAvIIP/1NqqAuuxvRSZnqUqPyV\n3yJvAXDnS7XoMwXth9pLPoQBockT0qzU92Prk5bN/bkiXtEt3yghaxWGoL7a\nGQmgtMoyLIT3FvetnduUohsK2Mfw1krQCotH0//qMVNd/cQ9FAnj9FGpSN3+\n9PHpkpS/XJDV2jwiU0lTL09rCpmnE9BbrRAVMbz+Z2jXXTvDVrzJ48HsPM9a\ngQbbbVoMYNJM4hU4B2ThTgMX7cguI3gEfjvzEe5fOYMopb4M57iobqRPjcpW\nyr/s8ULLdsDvDPwrksrCHe0ImMIY45ZtXAog0R+WYo4dMYLhRKdXvYjXgILV\nnOy4bssqLciMgSj8/8NgbHLKEQGwC0hGiv2bnvaLp23Q7rkH9YnYP8opoN2v\nougjG7zZ//6NcRc0/P2pFHxbd0mVZ4G/TuZ2HvdVS7rEnsy0Cgup28SIxctN\nCw9bhjaTe5TD2KXAJNUmRl0XGvbfG3LqpFngdVv5D9Tg0RggT0tEfAQwoG3Q\nlyjFT9DDVzs1XLvn8CD3wRR0MLuwpXmkgODJb3P/DPPYEZKLYIhrK0NyD8eJ\nLncSFowgPaaRWL2J0fOe/R1yD729F6Af8MHXDEjcIFIZJRTwy52l/1MlIlZp\n8+/Icg5NKa/4x1Njhbd34KikTbsr0Fl+5hFpnMZH1bN4bm6eB3m6Gux1gXiL\n7aNe\r\n=6uT+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFm8RPmjlY28yvjtuK8nyjcJObf6w+kkD66UTF3I2p1jAiEApRCagTOyhMVofjaddQQpp4a6XJdRjAPzN12DoSVv8XQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.d3a16455.0_1611085973350_0.8284576799591417"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.597ca1b6.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.597ca1b6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.597ca1b6.0","@material/mwc-tab":"0.21.0-canary.597ca1b6.0","@material/mwc-tab-scroller":"0.21.0-canary.597ca1b6.0","@material/tab":"=10.0.0-canary.b2faa116a.0","@material/tab-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2dea4d182145f148cba1edfd7b358ed05bc6c8ea","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2dea4d182145f148cba1edfd7b358ed05bc6c8ea/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.597ca1b6.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-r5tEgHG1hDMbFEwyi2fTundUzOnzWtRqoV6HWLVjabLHTjbxCw3pkrHGq1JvYa/LzpOqVXnTZRTt+iMJSkueKg==","shasum":"778e558f6fac5f78b416fb8264a12e4823f7c83b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.597ca1b6.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB4C2CRA9TVsSAnZWagAAQgUQAIcw6D2Caci30Eey5Qa/\n6anevoATH4kh0Rh0sT+6YBob7iL/HC4CyKlTNWB12LUJG0GGoiT4sIRYe/w4\ncBcchenWILyH89Eej2BjjF9Bqlm9YwfLoCJaRlf8XMJiEeFHPVhWeNyRxhtu\neFS2VhPHtOruH98lAYHZs+0eZsQ5ZObWBSyaIsl2FRo1n60XsoU23bQstoSM\nRn7Fq9VcD4634cX1WZycmgJqitt4yNGNziA0/fznENTJB8LXHXgixh7i4eFM\nK13Rw668UK31YvmB2IvyF47wTRMHfT/GVrvcyRgUj1d3kgcuxuoWLyNwvHb9\nhjeyEwJkpkjtX/+LvmjSJAesaaKmQC7nFRk/rlszjxaiUObXDsfDTF2Wjiiw\n+mNeUCt3cfX0roq8qzoTXe0Gjc+8TnGvYYBqx94rmWF88xwn1oJcurX/91tL\nY3kpNG84NCLHoGgctx/WLRFGjlmMpKEzI+NY4NBjNrRfi0hwhelHOHkkN22i\nq45JxXWmnFhBTbWDBBlwSlfzEV3sjUoLb6S2foB38WXkqv2pdhQkSvHToxug\nNC3uAY36uA4McnbwBf6VCAIcy11ZaRpRFZ+/d/Ed/7Ka+9JVXO/nBVTyNRYD\n8utTlMGSs8mhVjCZFDXqC1rRU2uoISXSzSr1ha8r7RSFGoKvsgqlu04irGKj\nWVMZ\r\n=ixsA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAbOL8/XmrbU2HmeY53caVPe1U/0gIiHyJTUohDFM0whAiEAlPes7IJt968AQ8BDKpAH8sSjRzcs5dmPPAEq9K/K/ko="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.597ca1b6.0_1611104437871_0.556421018152776"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.3c195efe.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.3c195efe.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.3c195efe.0","@material/mwc-tab":"0.21.0-canary.3c195efe.0","@material/mwc-tab-scroller":"0.21.0-canary.3c195efe.0","@material/tab":"=10.0.0-canary.b2faa116a.0","@material/tab-bar":"=10.0.0-canary.b2faa116a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5832b828afcaa6412dff007228c15a665862a145","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5832b828afcaa6412dff007228c15a665862a145/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.3c195efe.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-umaCvqTUUnIqTna3qeyG7gGOoT4VRcyCLd/3ssk1JMTdu1SJFTpawei6IrRBrNDSCftKl2CLm1wbMu8XbXiAUQ==","shasum":"2422d32d7b9527f5f94226b5b65e04eacabecc19","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.3c195efe.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB48aCRA9TVsSAnZWagAA83cP/3YOMi00n3xWAcutDRCs\nEyrgFO+QYSB2/7EvKKKcyKabA2YNqjBWgAIo0OseqcQ881cq+4cT11ARZMNx\nMOraRnoEJCcWTiR79/+gXr8cghnX+c0DweZUKt8JwFef4JKB+dydlWlXtMeP\nL4CSGVFo7wCE8zeke3g5LsMgl5hXMm8QLK07BrerqU9zffDxu1xy4go80nsB\nO4jPF38zfAo7Oj9MeVocpdxcdiqhl4kqmPGLLU+FzqKJGs+Pyr68INzlnfYI\nCF7on+KjvfLe+mgfh757F6bHrGlSryHbeglutheawPalsrTW/93BZAfUhjV9\nLACu0FFvTlU64O8pRu6kDQYhfmEO3VXEQ70TrVAwiUpb3NnA4SWn0RpcxQaI\nfwO0AfO8di4tEtoNf8P6Vqfjp97cJLu3z2r3X3/ZCtuvKDtGemGb9ribBxcQ\nYg/DCakfbjMs+anQO6iz3h1RDRQ+RgwovGK5sm/nMgK9RRg58lEqUO/Y2pP2\nBakmYdQkoLF9ybiaMdsolYl7Z8ItLfzefTTOuu2kf9K1GFSZex09re6KDqth\n+vZ2xetmWOeJvAugckvNG8PMeoUSBmHJeRjYeWle9Vao+M5sKCRmRelmjWZB\n4sCijTl83qHtqyz1aTZLyPn2bkej7OCAzUFXUwmo+oZP3QtSSX7gM3ptDfOA\ncyY5\r\n=FNhS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCq2wrWlSvltGth7BWb5mT8speD6pHtdSfnx5OHOGRD/wIgdw1eQjcyxrx1pNiKUB92QO0N8uxJLrrX//iXWRXn4eo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.3c195efe.0_1611108122336_0.5121179442923236"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f7b8755f.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.f7b8755f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f7b8755f.0","@material/mwc-tab":"0.21.0-canary.f7b8755f.0","@material/mwc-tab-scroller":"0.21.0-canary.f7b8755f.0","@material/tab":"=10.0.0-canary.0c95c9f7b.0","@material/tab-bar":"=10.0.0-canary.0c95c9f7b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"189595c9eb20e25a71796a5720374331d50a7f72","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/189595c9eb20e25a71796a5720374331d50a7f72/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.f7b8755f.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-/cLeAHaTu4WksNssUk6ZUelXjK7vLlFS+szLSEgzI9Kka/jDkf7fc1zZS6Y/L+bjSssnJ5CQE7Rx6ihtNAVeHQ==","shasum":"90e38bb169778d068c5e1e17ee4b5a550a105b4d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.f7b8755f.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCJS3CRA9TVsSAnZWagAAEg8P/39zNBya7cSumipUp9NK\nQg9a+3hRfXqOAsrRo1wOsE9anE0k1Ubun87jIB0NDcY6CSTL4f8Y4k1feXAW\n6VfQ+tPVZiPb3qazN2BWzSBZl5xAnjW3kEQfELNR+PSqUB1Hm7Pd9Sr+fMfo\nnCcviS9MA4f/5415QIIj2zUFiZkSfYke+5IwL/SHynbmFNdYvC1kyQ2Lj05Z\nY7QThX+naeLTSHzyCdkNks4H5hPckG96XxfwqKiLpmb/y9XkuvSk4mQqOeDU\n1/0nMwuJlzML1Nu3DWZWaMS/spwgA0M6Ecp0YXcmwQerc4bkzlRmYFYivW9z\nfAVxQgzCa5z/++2UtSwhyAiaRj8DlvQNyiVQLI3wSyM8hHBkajfBYh+0oq6/\nrpDN5SBrx+A+w5SD3N6L5rLzmt5iP9jVrNcuGantFylKh2HSwOMt4/Y7S2Nd\nj2dd28JqlsOwj/x0EJSamXXT08deyZTufr7q7LkwxJpMW9gZpvjpIWu31Rkb\nI8p3CWsfugEKKmJWaG0k5iVTc/z7ER9zZhhs4PPtadRRmeSVnC2+pZolRl5i\nFsdx+QEgG8XA3tkpnsRgJJ5YpIglDXKPRQ+DBoc0Qv1PvtfB43cD41uDU1XB\nO4orT/x9xGW7piiKevCIQeAJKZF/YDGFQky50PDLm7CO+QZ5KaPoHz3dzSRv\newd4\r\n=oEDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVIQH1trKsz99zH5ruzU+I5fSkrF0ezbok+yYddy1slwIhAIFxhtXQrdtRH+1QBcjzzBsHJrDMf7kcS1RJ4Xr0dw6o"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.f7b8755f.0_1611175095256_0.43575429376998076"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f60de7df.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.f60de7df.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f60de7df.0","@material/mwc-tab":"0.21.0-canary.f60de7df.0","@material/mwc-tab-scroller":"0.21.0-canary.f60de7df.0","@material/tab":"=10.0.0-canary.2ed2d829b.0","@material/tab-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ada07a353340882b0d087ddf967d399be3009123","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ada07a353340882b0d087ddf967d399be3009123/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.f60de7df.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-DXBswB2fjd+7J3V/AdGfJiuwNH5rnzbGsOqihv3/8+zfLctNCSAk9EljAblZSEFiFyTWKKRKl7Ltd9up6IqCXA==","shasum":"678d31383f48a185f7bf1a5c3028e27dfe1bfd86","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.f60de7df.0.tgz","fileCount":13,"unpackedSize":45758,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCL6lCRA9TVsSAnZWagAAP8gP/jvtk/u2M+gRFw0q0j5p\ne87Oqd6D4JB3qh8k8ViUoY24K2csJeSdNlxWrPK0B1ECP98u4UnOWB04L/1I\ne23uEirXlfbPNPsUBIEh2A7P7rySqz7wuTpSQyHtjaolEflukL+GjSvRPlJr\n4c8PYXj11VxS1OQNBjcZ2kinVBQ/Kr+Pazhp4rI5JYKJhpfc0usrP1u08rs8\nIy3FvK9Yl7m8wSoLz3uujWcSv/xhw3NZlU0iaj70r65SX7/XUp8SJ3pA8ifp\n6S2nwpWhN2LWSuV6ggvaubHsma07U9S4dBTGo0SUaGidR+hh0nD57nHKPiLO\n/SVAxtFNckYyjvjhyAltLPT/nJ22diAskymj8d/w/pkim2WEr1KcUMZIjcdU\ngmtBhIbAvgvZGMGTJWKtmJta7iO6ZhilNCV/Cl3XftZbI6wI0TS6lcM2ME9E\nx9tE8lURvbLIrNBrmZpadDsdf5Uwo4us25XPN9de7WDvwUgo7pWGByBhdDnq\nsI8Yi6FcywDr4bdKVr51mzsyq3ZMog3FN5hVRwX9e+mMJa9clDbS+cAMosAL\nMl6wzdHqteO50G0IzHfyulAoWPZgUq9CAWebD8PXM4Y2CysU54MaH2BlcvPd\nk/LKyfn2jrEiE/KeCEGY0MrMP3v0CLbmu1p+IGVDYa3M3yHjx3rU7HafD/Jg\nw4U6\r\n=7n9/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC9An/iq/CzxXr1GWXao0Pvgut54tZ/zONpUjjynYfetAIhAPCXvMUpMN5Ov8w5tesQp6CcyEVvrvxaugV03wd0QqKx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.f60de7df.0_1611185828633_0.427422391561993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.664a2927.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.664a2927.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.664a2927.0","@material/mwc-tab":"0.21.0-canary.664a2927.0","@material/mwc-tab-scroller":"0.21.0-canary.664a2927.0","@material/tab":"=10.0.0-canary.2ed2d829b.0","@material/tab-bar":"=10.0.0-canary.2ed2d829b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af2f8cdb8d2e4132b15e0b5a79f060d43a3431d9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.664a2927.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-SzhsuZhR3FqS8NAW2Z5Z0iL3F1Cjmf0dvtxyFHUjVD0SZovtC/drqOcX3/SW5r1PjHo+3HIxb+n4w3xtdvMClA==","shasum":"eb0baa1a9d6fbf8e3d78936b4d4762197979c75a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.664a2927.0.tgz","fileCount":13,"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdOuCRA9TVsSAnZWagAAaAUQAIHviUu+L0v43yuby0Dc\n3rAJcNxubhknce9HltdjbavWhxsH2KCrg513S7F07f/poXFqBjOrf44+EIrb\nc32SXGiZpxNpoKS4T9axOXctSrIRf6Ol3BZQ+k+Xad5Hfk5fRhSDqhOOUIE0\nKUfjpZ7E4thmvJKXjy6L7ERY1rvpkyesRqQ7cb8FhjRaQ0rnnJ/aJSY3y2X8\nXyXMavEprBioV5mfdKTmhdOFCTH0aEO3Kl3kbEo12LW/Bj1DxpQMEeQZrUiX\nvk2KGb1wZPDles8BaJ4gOfiZoe1QzWuhCBgifwM2oBcHorhXM+xwEzUkw3xk\n2PsIfJOHpVLappuDhK5zAL2wum+Zz7f1DxMN9M6lXeC3nM6pZa6xB38Edybf\nWoGZArEDXqs8LnmQg5UTxvhCJuPkDcFEMXspwV0BlJovNumNxkcIbJzNVcjH\n5zr1+3T8NEuvRft1RwdfyvtyTOclO3DLnovjb8gACLwLNDXU/bihJOVD9gCF\nasn+KE7ZDySFVb/PAxaPp8YycZrV0FXt1PBeI62Ohpa/rIw1vQbnWlEBiGT3\n94ePYqkhq5VwuNqzeemr/IfvO3vWXUOAhYSnM5zknVr+FqUuOIwstIfkQ6Ma\nwISMUYiJQIEBBSa0O8hgachW2NUEAfoBwlXXrC7Vjpoi1tWwsd6ehlGpijg/\nqMB9\r\n=X54b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGbMolZrqDHZ9usPv4aC5+awqXwwuRdXyGQjqAx3s9SfAiEAng50UyaoSVSZLkzMaPU2p4dn/n7BJ+Wl0MEucpWn5PI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.664a2927.0_1611256749798_0.5453584403953351"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d312e5.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.a6d312e5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d312e5.0","@material/mwc-tab":"0.21.0-canary.a6d312e5.0","@material/mwc-tab-scroller":"0.21.0-canary.a6d312e5.0","@material/tab":"=10.0.0-canary.fd61b0476.0","@material/tab-bar":"=10.0.0-canary.fd61b0476.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c9a270f0f64518469d960de40537a07c4cbaf812","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a270f0f64518469d960de40537a07c4cbaf812/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.a6d312e5.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7Oh8+1uKVh35aXzYmnAAo/MI/E7h+uGWtHehLJ173LAzoGdZUGCMjgGGM+7QgAJ1g4Wzs58olRKeLNNIr0hhuQ==","shasum":"bba66c2007ec727d4eac257438af02201aa186b9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.a6d312e5.0.tgz","fileCount":13,"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCfaZCRA9TVsSAnZWagAA6iYP/2s9Oz+EwpkZDPRk/56t\n+/tgrOXxiEIQV2hGB8d4l2mKYrUibIjH3ZG2T9DyFAV8wfOloLWPakSrSzvS\nmzuDehPl4HCUvuTT5G2dxr8T4h/oQqIgPHrtOBbVnACaVL9bN/THjbdy+A5l\nSMwh3qFjISDZu3EVRzaZqNFAXOoGfOTsvBmM/dRSFMBGpIA1wa5jm99qaWi8\n2r5d7XMly3+xzB+67q4lLviAxSEeraxQWJXVB/kgK3RK3by6yUSzWQR4vqjf\nJGENL4hjX+ezz1nxQgnCxhvP6/qYEhqdxZLf0EYMhnH0pDPOSltSJxEZqrcb\nqKXM1JvjLRtAEIFgvDxJ/XKBREx4XGgLJZRNWMry3mAg7KnzCTmYnFuGSg7v\nnzwPJ5qefidDsaz/neISC9ReBRCLL7/KtbDEovR7ukWN4/EpKQJllymdRfeJ\n33zZrXM4wpW4SDZBVckgq6d+wQ9J9P42h4/cEvqIOqqsEscuXixn+RYRW8q6\n7u4+3A4mAr7GXTy16quUZgIuqo5rk4KSvR4b8gZHmX2Skya+PaWrFNGSsPKX\nsQLGooB1ArtCU9prNCS07dYdTWHRKYDL37vCjM0MVHLH0FadClmkhX5F27XZ\nD8tTScr2VOR7lTv9SfajZlpl31AaLzSdkpXHwtZM3zE4CoP9PAvF18a0XYj4\ne3fW\r\n=uLSL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCVM4KX+0FWO2vgCuESOvMHn/FGSO5CWYaHWLoqbNbMEwIhAOR84JUKQkMgYSxI2DRwW0zOKBE2m9UjozMLVTExWiG1"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.a6d312e5.0_1611265688538_0.3156980877130078"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.027365eb.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.027365eb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.027365eb.0","@material/mwc-tab":"0.21.0-canary.027365eb.0","@material/mwc-tab-scroller":"0.21.0-canary.027365eb.0","@material/tab":"=10.0.0-canary.07deaec27.0","@material/tab-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"85e9fc6866aaf5bc83721e8c823275ba9232a536","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85e9fc6866aaf5bc83721e8c823275ba9232a536/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.027365eb.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-+cjTtsSm/T8az0v1Pc/Jk6mFi1y9QYkwIkbNWL+t1sFvdlpS0rHADAgYCbRk3rMyYMkL29ta/W5poZLXxPI1lQ==","shasum":"00ead29dbc324cec92b15699b1df75a6dfae18d3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.027365eb.0.tgz","fileCount":13,"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCz65CRA9TVsSAnZWagAAV20QAJ3YRKTICCBsopy8EYuw\n8N6hofX4GQcG4UO5X0FEjO1Z1eritvV8fGM1gU8fHQBm8EWEYMOmAKWJVFGV\nEoRs9XeCO6sHawGGBLqu8c3WteisGzj0065ti/wBH+deYLmbnvZIPhxLlExk\n6hMz5wARow5qGGjtTnFb2BvLtTmp6BXPDj+k5yEVq6M5iPrUriELcufI8FkJ\nElqnYiH0Vh2jSSfe2hESeBvEiR9AiKtwYhgMMqeqMnaiAV6tDfdDJ4N86gGd\nEBQkzRY1Rx3OtWmfc67baiNMiakzGxvkQCpL+qAfn5MgPO1kWA5RDsQoIfJ0\noptPtGHhRxZMhegWZ5Yxy+0kQ6fuuZ5rzlyBb2mJ0U1im39meaQfdsrblsPV\nvrkXXnpEwUAjKN8knjw3JGnOpLOsFyBT82lBgLfDEFml34OjNjcc7S+gmLE0\nYaDGQkwEzPfloE0D6lfjtW88ro9I/RTZJqwtpyF7sC5dw9JdUyj2NwD/w2Uf\nYFCsvFPWETAqxPZl3Cdk+EXdVsJ+8OzMJwyXYSTjjYiko2BzwxtYr3rd5DSq\nTItMhr/ZJ6wH2hAQOypTr7n7/raJgq+N70jPZK7ZeXClAqBFo457YbtG2naz\n9PcLeP/+MvX2NAnauegYzZKQ/FhqXNfPFue+Ltzp1dXu2uqGcTubF4OrafVd\nrCxR\r\n=fX6L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGRk38Rnp1JcZFkHqOqyksI28k18gwY6fcwrVHGebNZTAiEAtvSAOPk3b/WE/r1eBHlRTMpf4wMPbkGbW/pf2Of3qSc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.027365eb.0_1611349689482_0.9557753120639072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7e72b66d.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.7e72b66d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7e72b66d.0","@material/mwc-tab":"0.21.0-canary.7e72b66d.0","@material/mwc-tab-scroller":"0.21.0-canary.7e72b66d.0","@material/tab":"=10.0.0-canary.07deaec27.0","@material/tab-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"000cf6108aa08030d7569d4ad30c798e7ebe9da3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/000cf6108aa08030d7569d4ad30c798e7ebe9da3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.7e72b66d.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-7AdFEGK1qiJ39OIvs+P/aAW0CsMusmQ4JFhY4YvJx0K+MPXRTR1NZVxGBMz9FbFMw5mk6eBu+9AvXZod/+f5eg==","shasum":"f117f69c025c2ec3dd4f5ae8384b0413ac44c58d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.7e72b66d.0.tgz","fileCount":13,"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC19HCRA9TVsSAnZWagAAKBUP/1I51oDKNpgKw/7jJLqQ\nxSxtWCBLx+ftpcLzMUJmIZD/QeviXy6fpXUJEPt4KhbWLsWIPSNPQKLnxS/f\ne6zSq113gMB5d/2VPjpscA/N2u5HHo+vOqqYGcyiAcf2CmjuMuLqTurVefAs\nGeANjIr72zTiodAaxx5VV9u9fH/5+IE5+h7Pk54fXF1HwfuuCkuThm3k+V+z\nrU6dZmGinnOVukClsN/21UmNV/WLHCk926/e8g+fkk3JAkn5JqcQLPSSwlXc\nG5dV5/E7ltiUojOqri8vVtl9GcLqSz6BvfqqfVm2EEE70OSsMvqqzNRQqCVj\ns+p1S/QeMUlZBegMIM5Xh0+ZIY/+haiuuhGidOAV3WL7Lg4lXzLWmAfoMJj2\nizARgsv91cJmtcgP3jfl7X5Lwv0wizNtUESEHMJwu6ruUtxCSIJk4deOYkO6\nns4KKjlqaCEUogxbGBW1ntrMLZneD9ACetO+/MIlWJpBvBxXJbS2nmlmWgtA\nLCRHbmOrA+47wtJxgqRK5RFQqg0reyWbw757dDfqaKGq7cS4krhWJacbCmvJ\n0D4KlbrfdlSqtCM6aAWJvVulr7+IfwoKMq61GfT6QQUQc2y5zUzahqe3nmZH\nkVZ4fMFPCkVTA+zOUm0SL8voot5XXOeSS2O6nQp74QkHeU2+v16F4PvF0hSM\nKEuq\r\n=+Mqj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFYEIk3Ta8mLubCptegHkAmfsi1siL4bh3g2WFx0QY0gIhAOOJheZTof00fTFybvDDp8bzmBBAXyZwKpDtAl4p2epV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.7e72b66d.0_1611358023250_0.8408348990816688"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a6d6a1e7.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.a6d6a1e7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a6d6a1e7.0","@material/mwc-tab":"0.21.0-canary.a6d6a1e7.0","@material/mwc-tab-scroller":"0.21.0-canary.a6d6a1e7.0","@material/tab":"=10.0.0-canary.07deaec27.0","@material/tab-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"24a3d6e567ad7ea6c29b40c2088121baec3a5fc3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/24a3d6e567ad7ea6c29b40c2088121baec3a5fc3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.a6d6a1e7.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-m1N91ZCXfMVcqhxVBa/XHUXBkWNVW8wbVvZ5as2+DP7zpx2b2uoUSG5iAapl5/2oGJHZdpgYvkNaaWQfIV/ZSg==","shasum":"32ba24f3c75db8fc687bf90b10b7ffe72b3b5b1f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.a6d6a1e7.0.tgz","fileCount":13,"unpackedSize":46844,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2C/CRA9TVsSAnZWagAAyqIP/RVHIUcGzke8cRLDgxJ0\nF1rW3k/CQxnouAS1KB3yp3nEaVDm/Mzsf6CxJZzXikwpu8O0BYsOYiBXXyEi\nn4oYOORc07UNEupPANdo/ic4i369i2TUFjj2G3yAJcYGAJwlMYyJvfMHzXyQ\nhP4p1GQsjv/REH0Y0Trt0Yv3mxCwOP79N4GPUnWwULOKXOCbSBsAzYw/u5QQ\nQu8Gqy6CFEJ4mD97NtC+F4IepucTik+bcy/Ow3z9Ny4tS1TerHiNqTNU2eEK\neJiCF6mlJDJpQL6BKAS4YM4TI8BRyWd/q10r11tbd9igX7+b3DxvKkou0B2O\n+d2oHZ8KjZRsn7HsPd81jj+YT+wMImewbEyCKViRx3Z+92rIgrN7mgrTqB+B\n93AcoTOw6q03IEhauac+v7sAtna7gNxG8FQCFV3A7rxytsYgqnsYAdp5hjC3\nJtQ6y0ZT3WML10y2gJEt6ua5v5DSyxokFw4aLhpSieH1hnJp1VgJvkq9bjWN\n1qzkmujpHZECFKa8fAm0/FB1+F0oziOFScX6qBOaQ7S8pXyfl90tcIw2xmjF\nyE3y4xu94Cu84L/Pm/BYNI2Vu7hXJWl7LlbSNEa8THO/iaK633HjH22ru+lB\nGUY6xjjsaiNFFR200IsR1dQLQ54gXCcdH9ViJcaxZRFwoKmK20Uxi0unRF29\n13JT\r\n=fSQ0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvTcWr4TXij5g2oQCjjYdlms5QD6PzBiOcNQRo8/5CxwIhALBulr9B/AzNSEPwkwzFErHHOs6Sf0WuRWdsKXA4HfYS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.a6d6a1e7.0_1611358398682_0.5266090032386015"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b95fe100.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b95fe100.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b95fe100.0","@material/mwc-tab":"0.21.0-canary.b95fe100.0","@material/mwc-tab-scroller":"0.21.0-canary.b95fe100.0","@material/tab":"=10.0.0-canary.07deaec27.0","@material/tab-bar":"=10.0.0-canary.07deaec27.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"229d3b172620cbdd5deae4cb60852f0ad2d4671e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/229d3b172620cbdd5deae4cb60852f0ad2d4671e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b95fe100.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-rSRziWGraJhBbn+d2tIrc1tlkpPjcym9xWOQM/JmwH+9uAtSfh/5tLaf4/q9DT/E23+2lryzsTway4RqvMweXw==","shasum":"abc5282cdda74f90d8b43fcce2d42a9d85804020","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b95fe100.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2U9CRA9TVsSAnZWagAAfqAP+wZ7AxJL9ZUHMddK8k7X\n4BfmYC+Z7k3V6efILZJbbxBiySrlVcexJP1D0sWx9oG3rPMxSb+KBI2y+BLc\nw3I+pf2D6LCTYpKEasQYaLAKzOJGXFtqbSqtE2tFnwKcw1o6pt5C/Bp7FGNs\nThB7Xki3w1NfILF4CohmYPPoi2kLD+n0fsWJbT5TUwcLdedxkLd9uo5uiiHa\nxyNbNb/EudPaaGpbWul+YTicpPjmEK+uKqNuZqVGIB7VesYXbh6F75x+ON8j\nqTHlPmij1sA8CDmB0YeHQUFTIu4t4Rv7BFEooYmeoW1SLL3EfBjqF1DqoD8G\n8d8++hCkbvLnGVHTnbvojvk4cB5fXgDT1OqcI8+mGRc6m26rFMt5JFVtFn8c\nM7V0j2RIgELVECYYL+ZQJjObjloSp42F8YrKvhqiN7UiNcz7jIArT0ylsi0i\nwNlQfvg0bFqy7pFP3kzC6b/0Y0Z9ZkyPjyWzmK/E/bWilpYKlJCzUZMD1qZm\ni+3l+EW9Ep26XQ03lCGo6jG/34aNAAIgrVKeTu/DCh9SnCGzBsVUp6ASR2l4\n78C9cG2h7oWCO+TZgrE1v71t/8soaTOxaOgdMoiJ/f3bWp8WrKo1pxCGChqF\n010RcY9ST5vKxC0KoeyoIzlBrRFDNV+CvyFoTtOpGuMvPuRJeZNPVwNUJyQa\nGk97\r\n=0L30\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDO74GAV4/pQWLdWzwjYumtOH7SLbRHaWtIgBMZ90zZCwIgFDXh+hDC5EG2nkwzOZixIOVhrvVpS6tDv0KiCRgYPSo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b95fe100.0_1611359549416_0.1594259629459811"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c8797192.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c8797192.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c8797192.0","@material/mwc-tab":"0.21.0-canary.c8797192.0","@material/mwc-tab-scroller":"0.21.0-canary.c8797192.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","@material/tab-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42b37fcb3c5c8e4488b44daf72e5e374bf0e2e75/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c8797192.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-lA2Szv/uN46lvj53rN+q13vkS2dEKVQnjakE14MCTUY5u9XztICgXI3kHyyDU4eqMTRCM89zneZ6QJ658vyLMg==","shasum":"963c78369d48f5327df1953e9cfe2dc7c5805000","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c8797192.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2jSCRA9TVsSAnZWagAA6ygQAJllUU3u1bT712NDDi5q\nwQJvjzHjllejxV/u52/1c/KlZWN5Mgru+PczWiI1hi9kCjQdS/F7PPom4Bh/\nyoTN6vZX/WtJe2UkqAPtaf37zfxr+vbJOtEZJ1yELEdSnRKsgiGim7j1Ns0J\ntUbAv/Nm+xfvdCYwFdDFDpo9AyRKNR5EEVqQyWYMkU8tNAWFj3XPWvx+6ikj\nLQapL6wkwcOpTPZqHNv/y/Cm3yxNBInkdL1+RSlnahjeuJNVCmM774NCPd6J\nJ5yvjeyrXUc1dU+A6jo4/TRQ7cxyRdC9/ynVjwU87KYlQ6uaG6hE5olB2Czu\ni6UnfchSvS0Mj6FbOfQioUWVgaBEUDePLqkNf+oaucIhMjBHgFH6dmXXK210\nzZuNk8/75nzAQ0QoR6O3TgM0N9aLMYmHyhyxt6k6sNoux5gDdZm0ZZv1m0R8\nzv7XR00MvF5Pbxo9Ne1+cocOFtC8tI/8EyBtHSydi9P8Ub85Ls1dgJBQzE1E\n7zNZSAlpQHI0/DwBzHjtkLAOhCK1EKjtlEny703K2ofgydRoGf7PRAEcDNrn\nsHmG3WubvqeTyuTT2wTfZFniBfrBAz1sWUF3A00Uo/8VRkJ6lR4okDpyozak\nC12OVkleBigMWEMxF+7iJuEIst0xmo4NIkA5h1Vpvzp+6s64JfkAMB3iYW9z\nGvKs\r\n=Exub\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFcORj30VwSH5byinNHMFFGVBjgneWpAYpBPs7ZSlOaxAiEA6fQsZw0jtTErhVJ9yX4E142Bh9Zgj1ZwVbE04qWr4kg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c8797192.0_1611360465731_0.042949267452478956"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.946f5563.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.946f5563.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.946f5563.0","@material/mwc-tab":"0.21.0-canary.946f5563.0","@material/mwc-tab-scroller":"0.21.0-canary.946f5563.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","@material/tab-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/56b8a23ccbe326cdce0b3b9f5d1fd5c5f5f68f91/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.946f5563.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-1SCH1YdWUEcBz1+kBat+D95gBDskoaf6yOdCq3h/gN3CX0l5Im4A4we/zg2J6LLO4TWHwC8Nktez745VYTM+Cg==","shasum":"0501c8ca8b0e96f1750891135edfd0fa2ff75df2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.946f5563.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC3FWCRA9TVsSAnZWagAABoQQAI1akKWkoE85Kypy8iQb\nX2M/zMU1kVbuCYG7/yQc1oe44xVQHbOcZPJk1pbt7emreIlDGnk8VN0fEqzl\n/pdU4iQZTffOcrApx4jAB2ZplW3hco8iDAHN20il0Uv9Qab3OrbVzMn5J/r/\nhsczZjPGh7IKxvcw4a8FQot6b2IzuiDp21rPgzwlW9E8rP9tXwAKK617rF7g\n6fQ7+aHXQg4EMbtqZI+zMavH4WezqZxhQFKZv0ts5Seo4ynlcxie+vLkh3i1\n+DdHl8ju5q+DWUOwYE+Rk+mAjtfphyOndHSgMeCV+14NmW3LKIC0GMlT5kFz\n5VfKwuVIYaKQI+3wQl8bJCrdD+Rxu6WtWJJbttrOokp9KWKewQrd7uejxRdf\njqxt3Erf39MM37UjfsXAsiYw+WTzisyvKXR6ONwTOeXO5S4DZ+uEglIuNDMD\niHQ7G9Y78NSTQSqoHyBvidlUGXKwVDaxu2nVN1EW7P9gtnauE510CFDEOsRL\nwDx+qthr/qu8ZUGDv2W2lsvgVEp6irpr0Bs0L0J96LzcNkn4B+4F+8Z59FFy\nMDednsYb+gburYgI/f2ePWeXE/wDKS6xcGH/MsGYRXJ7Qx9p7ACXtUdc7plG\nXhUVPsTIMtSLCkA5Q6yw2I71EpIt2xd9VeJyLiycsB+PodP76pNU95grLk6f\n3vre\r\n=NWL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHm/bMI6dIHcPIvH0FNYhp16kZ43/2H62zkofrOdMroTAiBZvE6cOlE2U2G+PZrZVNEeW38L0ztRmbMHEVeXNwtqVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.946f5563.0_1611362645958_0.20371011876926248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.43664f0e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.43664f0e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.43664f0e.0","@material/mwc-tab":"0.21.0-canary.43664f0e.0","@material/mwc-tab-scroller":"0.21.0-canary.43664f0e.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","@material/tab-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62b7e6f595b2e13e2e57bd8f8f56ec11405ee0f5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.43664f0e.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-t4/ZtWlLC2OnTpMzHIsbE+3dwjoSTRi3zxMUa28yHhmhBQkTtTTr/8Tr2TAMJMRmQt+xKKoRVwocDghltMEz5A==","shasum":"de959eb3a666b9bb9ff60036b795415ff753b890","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.43664f0e.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD0jtCRA9TVsSAnZWagAACGcP/3dUI4U6XXH6BR/UCf3f\njzhx83ivlykboGLC6ovtblz7fmLQ+/zGI4EANrISzAYdojTqFCkNnWMcNGDn\nIJeSekR6EVSoczKRHTGZu6LoJfFZqZAyTdNiBHiZPTr9SBD8gm1REB+b/e0T\nAOPJ+W66xUbIC02LxjCri1y3MNtDQ3vBoM76olo2SeAeoy8CR2HOOjW1YhfW\n5Cd+40GkWRAMq7wW0Hzda9saYF0EqtMVcT/oy5pcVX+ur9t/FZrj/8xUk12p\nnGNwDVIKxdbaIuulqHyh9pE6CLjEdE2xke79GD8Q1RhLRuO5cC8JTAcZP8Fo\n1a1EMQoeRtn56gcC8vhHZyZH6qYPeto8lcUyBSABz0PoDA4UiHz563WfYbpt\noB0js8V6g3qvrXj9aVb1QeLG8d1t4Wo/dkEQR78HaAW4eRD2Y2kZFOLqLLjM\nRRPy+4PnxEBCdMpCUTiWbaJYPXg4CkwBSUGCoWtviwDz7NNmOcQFk3b65vey\nNtIPuHqphACD2XkB9rMf/69uV7xRERsgyPctL24aJom0CFPyPhg0xd0nkf1G\nx/jh/9Gas2DkEAZplnjQfZ8unG8LEmMZl6Z64YpBkxE2+vDAIVdfboeO1Hip\nB2rGn+0kt5BLaDZ/7xE3ItBMYsd3j8AaaWLqxjuUrE1lzvYaYwZBFbjAXjPW\noPTd\r\n=jrRD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCUKWYlYnhmWF2K70cFmgKLeg8sGCmL0s5FUadJn+IGAgIhAOyBzvyPTg11HeYc+Zan0I4t706kTgLByOFpzIYE9Ohu"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.43664f0e.0_1611614444761_0.6554069696065181"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2e769e3c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2e769e3c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2e769e3c.0","@material/mwc-tab":"0.21.0-canary.2e769e3c.0","@material/mwc-tab-scroller":"0.21.0-canary.2e769e3c.0","@material/tab":"=10.0.0-canary.b9adb7a0f.0","@material/tab-bar":"=10.0.0-canary.b9adb7a0f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3a3fae1109be58444840f6099c0f87c3966367d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3fae1109be58444840f6099c0f87c3966367d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2e769e3c.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-LazuxhylRRph9egcDCtveJIZAMPbirxYXvxBMU4vBpuj8oQBeN9RpOlR9czYcxdfWjoABiBtgY7i10AZsdMLEw==","shasum":"f5c64e6c68c2583bc12cc84fc92f621762c2af89","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2e769e3c.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD10aCRA9TVsSAnZWagAAZs0QAKOgWHEztM8ps//8ipgs\nua/n1bqdWU8F7iOjKYQygJXiBCGmmfiy0W/El6tu5FVUHhqVa7vZ3AhbehVY\nzJ9WCLUvuzTesS5AsQqr94PYZMAQeNNnh04SNUaVVhE6KjTidgpdbMIln1ZF\niD6XVcUH8sGKgcmGUVgmqmgY+G8jtPXk97c0f1KSkv4nytkZdVFC35Hwlqcp\nmqEdYqJ4CllRjlsKGQ2zssFG5wfJByL9AGqIkurSN4riYvdI7QgWmCCMmPaG\nUjJmpDtOoNHR7YegzLPnnTDPDDdy22cWaraanxShtcVIoe8tm3+S+V1Uazcp\n+n5iB3VpX1BHOZThME7eg5fqhWdvhh6OBmPY7OuHpdCqYozyjEowuTU5I0AF\ncXvXw5Hbc0WmoFKkLglAvxcKLmqdauybxyhKtzepXffH9GfZTFNVy/xlSkv2\ns5UO8vx/mI+apW3AjtLcyZUUyQROB4bi4kt00FKxeBP0O8FuvcIhCJqeIrrd\nTErjmh4EFKPIoVm7iBGGthbzTEKP/2i8EFUBtwiwi/UAGc0JfciAhKuAgxCB\nQKZef8sjWKt3FJm8q8yygXHgil1ZAvFLSHwEIwGerv8KO1nSrTSgUmk9R0mc\nXigGrHIq66MfcxEpo8j9H0qa07GdbNiYYZhlgmTtyltqID075m3A9huO6oUP\nSJzT\r\n=D3nb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDwTwS4XHgqg/LVcdFn6zhChpPTlcYdCqHNsUxztpqx6AIhAPT62nohVnM4Ax4Pf6JN5Su2yalSJyC/agorqOWAjUnz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2e769e3c.0_1611619610094_0.9461313394267941"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.14e01610.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.14e01610.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.14e01610.0","@material/mwc-tab":"0.21.0-canary.14e01610.0","@material/mwc-tab-scroller":"0.21.0-canary.14e01610.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0794659aea627aa04b2ec37e3f0e8cd9d976ae8a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0794659aea627aa04b2ec37e3f0e8cd9d976ae8a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.14e01610.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-2Mmiqhm+CUNaDmLIdEsSuMTDgRya2ob7dlKJh01iz6J/ro8tEqMBFfEH4rOsK91i0DpYIPkOiyT50AZNYlhXTw==","shasum":"80188620d435175b0c4ea976bc8215b740c8d7f8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.14e01610.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcRjCRA9TVsSAnZWagAAL9gP/i5e0wepzmgmhV22LuVr\nl7hh2+d0ihmkahVUeNS+kOOixPU75xXJFm8uEfFImN4YMI4RS+M8ghbc5DaR\nxqv/uUvbCOhI5R6AKW7t2nPDLaW4LjgdbkHE3G2rAx8OQJuOubktCjqwgPrT\nKT2I/YsUsEAuIBrNpG63xpVfjIk1Ne2s61MKPUxfuZcq1Ju6VyDv4CjRVfPo\nUdW63tzszGVS1XvMqk+d6gg2klSTN0EhbGCysJr6PGoC2ibm8EWWys2mfPnK\nvC5OXG5hmkG6KPSZiK1mLJmw6aWfLbQ7vqda6hznA6b1mWEAb0gS+1cPvskr\nxSHkZ2Yx4KDFr6xrDE+VBTp5eSpG9c0OG0SqAzUzNrvmf6NwuSKEuNhlQnRr\n8otLdbzgCr1sJSey77jWVL757rJwcNrq/FAfa09kVAkUb5qXvW9obplJX9nY\nxUlBPog6PRbrwVMhMBUq5PPQt6eQKSOLo1I5nQ16SkEsUnfQZINvsLN9oOT5\nNmWKiBFHNEJGobfoJu5BqbBUHdsO6HFWfDjd7mQfvhKNrPRs1j9jB8VQPc12\nnMZHXmDyAeiQPbLmbFLj9J0/XdNRhLyJBN9mx+qdMvuPz9IiSjCZeOEOe/e/\nywFJhOrUlb/hienBZ7cQBsbAErvXacqvhkgYk4MKD+bFboWWyAOxTWeQNE5Z\n09ZX\r\n=axOY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpk25rX4SV33appIYBE+UJQfxqTjVu1RH8ZyW05Wh59gIgTWkeZm6Ahl9z8EKdvdWa+pjM6xmNbyjabYvkB8KqVsc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.14e01610.0_1611777123030_0.2763388101893187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5de00c1b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5de00c1b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5de00c1b.0","@material/mwc-tab":"0.21.0-canary.5de00c1b.0","@material/mwc-tab-scroller":"0.21.0-canary.5de00c1b.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"65f40b8130ec795f2a349c0699be5b3038a9c32e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/65f40b8130ec795f2a349c0699be5b3038a9c32e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5de00c1b.0","_nodeVersion":"10.23.0","_npmVersion":"lerna/3.22.1/node@v10.23.0+x64 (linux)","dist":{"integrity":"sha512-GE5NyWnsaxsBqNB8PA7vAtP4udpARwSF/MW9gOOSkwkGiqpE7F0v2zxtUjVpPNZpJfvjKDTdJn9sEQK+sOGLmA==","shasum":"3f0c2da30f80e881db5d1c99f3cbf9aacd887d30","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5de00c1b.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEcpnCRA9TVsSAnZWagAAeDcP/1Qx0ugWA0W0th0UHeBG\nyOmjvSCnkuMUBbhCjaZxkbx9UnszeMJIl3YQyjWo7Kr0OqZmI4JdwHkcZ8r9\nqOAojef6Saq+nUSmI67q/vIYZq1rgXh3tSTTDVDZ2uc4xA3nJ2Z4tMi6HAEK\n7ZCVSRqzFNWQSokhjaizxm9sPFwXqeLSL/zP9355ibgXMyOPDU11WxwLr94s\nejIJfyNu2OjEbmHg/wUj/3egQxPfdH0mvu0uQPWCwEHuL+Xl2FJu/0RMW6V9\neQqQq/nHfhCrBX9YiCaRg3cY8i03wEfPA4dLkgHyFepIHts79PMH+dRu8H1y\n6CRt7jPSRcCCg+8VrRwMs1AjU15W5zPdkLG0xrhaq36xTOnogAf6Dv816iJ+\n+cQo+av/nMjb9XQGc8zhmzE+yRHKPhxiPEgK0mU8IOwmyMNCT2GiNtzanj96\nDbLO85G6+UJEDTJOnJGS1JMZ9xyhgxvhLtz+npMYEk3RSrTgwqMVfUP9ErJ3\nrmz8GUDp2rC7V2kwH68YEsRXLRtJESGXFQ9HgXzPVArFNexdo5tWiLe1trT0\ny2NqOm+Ux8tgQ/97+eAFxfdk1ii2pNqjZdM0L3EB9oQoPRlddlc/XMowkvsm\nGSbuXzgMlWrBz31AynG/uEONb7ugmCtGzFmDQTUH3xY5yI394d4ah1eIiuZJ\nJuIx\r\n=JHn5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICHYzg6wMBv3GGIGzkzpJU9WD166kMIm4ngeQfChc9TdAiEA75POVVhnRLb0oCv8Os09AAUvtUBfS1/PtsE3h4OBfYg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5de00c1b.0_1611778663193_0.011180162011199535"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5a328336.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5a328336.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5a328336.0","@material/mwc-tab":"0.21.0-canary.5a328336.0","@material/mwc-tab-scroller":"0.21.0-canary.5a328336.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5547f58c69336881e54d7463a7f7d92a04b53c7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5547f58c69336881e54d7463a7f7d92a04b53c7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5a328336.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-RAxgpPS3LW6twcoQwblFqU5TdRkn1MOOcojbr9sIEA5AGwkV9QAzn1gPc8RlTWl/drihE+YIv0AOqUKNYeDjTA==","shasum":"a37c9cda30355abbeb6505ebfe87ce465d67b82a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5a328336.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgExakCRA9TVsSAnZWagAANlgP/3/DxXHzLyQjSGezr/iE\nacemyjDRtQ4MIzRSeXwIQ6rpKdmuicWKjVqL8a80eSxIvKA1UO1lgYulf70G\nsoX1cUHCpPHaVq4G2YBgCGrNnIg0SMQJOitYk6329Ww8mHSOwzZD6BlGxhx5\nM6Q54doepMITRNl2BhaTVm26/2h8K8QqrrKEca/J8WypCncNoZREeaUXhjmB\n760R4FSjf0RaNUhjzyDKsoC3y+JcLxXz3tsVw+XcAK+jP4IfLDM+jHH/M1YD\nLJBKLB7oX592Qi8T5fep6FQ4+Wxeq85LBOGi365++ocABQmbE5Jd7gANe1KV\nzQVbAHD0a8xoM+0YYmCpUh1JN6dA1GC+ljFPGZud0xr/wirFWYAxlnuGaHrN\nI7AUdAjoj0f9f9Y+VM/buE9gLYwNDnV9/IvWMVsdPgq6oB1swG8K62rVLaRa\nWFTXqpm8GoW4xYu79t486vUOKFzbGleNTMaBL1nbXRxqLSRMRllKjt2CMYj6\nn3o/nvTGP/0N/kNu5ukdBcZmTGiGqLQ9+psddnXOVmGc9A3d6QswFjssnbHa\ny4EZxTdfHSi3iGFD/qYtHXuwuL79wQKBeT4s9FpCJAuM9fyucqseVWkw/HXw\nyRu6vROoVnRccWWeFcLgb7foj1DL4xSUuBLem8Bn7k9fTP8+AgSdiCRt19pK\nsQAC\r\n=CCAd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeeETremTfOdlAAnlG4raaQ3ng/2HlnVKoWW0b7v040AIhAPgEGsubGbnznnnivxLCsNkcaLpyrG+Dub8Jpzicz35O"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5a328336.0_1611863716459_0.7438395885508524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.533b1251.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.533b1251.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.533b1251.0","@material/mwc-tab":"0.21.0-canary.533b1251.0","@material/mwc-tab-scroller":"0.21.0-canary.533b1251.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b88cf0e2eded50fb9a839a426059ff1f8242a490","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b88cf0e2eded50fb9a839a426059ff1f8242a490/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.533b1251.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-QXV1b4ftO7AkOIYvZHS76WCOdV8JMWVy7eOxJfguzDnqironEAr2Z/KcJAePhboEPXCJHcZQEf+thp8w/u6SkQ==","shasum":"c22ecab44c2b094209d335af2c349dee8a0b34ee","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.533b1251.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgFCXSCRA9TVsSAnZWagAAdQoP/RN3C9AyZiftSjFMzfsX\n9ho4Ea6AxztXHDTYGWiRVM18teAVte2i18XdJFvr00B2PpQzAkj351keNNG/\nFkbm/UY1A0fK5PD/xxUB0lGPgDpiYXVpOugMz40bO/4wzPaUZcj5BF4UFMPW\n6MQPQk/+EOKo6kb4oItHiekopY77Dlb06UEoLn1bXKuhZWLyynJZ96drscLP\nveT4OjOX65gu7aM0yZbiJAwl8v2vL+wwfcu91G6FX39HIlwDWjKf6lq7YTZL\nhUfyRM5qOjpPulXAlfucEAlfv4wzfo6BMR2oSTCEe+1sjur1bkafvxTEWlTx\nl5vrUV0AXy5HDFXvJGzmJHHJe0UZlpHmQxOGIBIsnk0XynAGAxYplF6iGtyd\netpIbpary/V4xX4LE1Iqe15sSIvQcJNyw4gCNk4mra2ph+x7KUB9gxmihesC\nU2EJ0sPNHgzn6H4i8kSNTyO1y1exHUbSzxiQslgAT3B2NEKQ6qdb7BWbNU4L\n7S9pIcJdqc8nd8hvBBWO3Aif5yuMy8vsc1pgheaeT32V7kIe4sEUYUWuC+/6\nKAdQvcFLvpLmCaGq42oYeKbxRskMsP6b5yAfZEEFNX831G4fIBD/M2aozI0v\nh/lTbwpTyge1h6RXLmBDj3Le/g5FsYA3YHWn0RsalPBkB39k7jSeF8cTZY+3\nEJqf\r\n=4KKE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTpNzhSBuc160F/Hm72haCzTPWoGFyxPVSKWiuSWV3CAiBjerMDX8kx0FT1tbzgTBCUi9a769AeG76OTJByUsiHLQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.533b1251.0_1611933137860_0.847997235425678"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ab5c0a10.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.ab5c0a10.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ab5c0a10.0","@material/mwc-tab":"0.21.0-canary.ab5c0a10.0","@material/mwc-tab-scroller":"0.21.0-canary.ab5c0a10.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2809af58a44d479ea0c8000c34c546f525921004","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2809af58a44d479ea0c8000c34c546f525921004/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.ab5c0a10.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-/pBAIvYPa2p2+qeNUBrqdnTqKVGUxATcMYoKH8StZ3BTqS/rW+nBvmsXGFN4BK7Flr+5aix5Dd/6wJNKUYMPVw==","shasum":"964f442730f1841d42dcbbb6a4b9b3bb1619c550","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.ab5c0a10.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGbN3CRA9TVsSAnZWagAA2LIP/REkOlFZunuG0wYde8c2\nN98zfyL/aw6zS4r5lPzoblSJhyuERssck7pnl7OIgV6IXZPMoKUfDrMFRW4h\ngwf8SEpv+BEF1+4qvEp/fvT/IMsK6fCTaRmYliE/D9MATBSuxbhXS/rmL0vP\nMe2Ve6dKul6J+zzD5hIs9WuJPfUj2hEU1Yw4tYtjAAU7zcUlUnl83tT7PeZv\n7En9LUSeBXZvbmlyZVoIKMADYDgsvkD54d8nPVyTElEuJEtyDR8CwTnO2BGX\nJnrix+TZp6voHfhpW+JJEoO5IuzYlx3IRLdReXlVmzY+K70rAnGS3tTr768v\n9C7vUilvbOJwLaIueIluF+U1z/OxzrKHMJa/X59FgXfGVf6byG8YeHR2Sblc\nhcwVWcbLygCkeADz6EIqxwF12/lA1+In8MwBECvWFnLDKOYIBASKbF5Jszyy\nMsDcsWz9zjAKJeGNSYJ7+7F3O1QNCHJjLbp0CV+xo9XYk+8zvoGgJMcd/N26\naJCIbxa8Le85Em2mF4lAev+qRdLt1ChhNCSSK055K0TaFxqR/SOgRirEL7W0\nWbpZtIW2GmLR3eHW7hcOPhAezAvwh6lQ6dnuzedurhvsIvUW5tsUT8F7Ddlt\nTlJnv0hTz32Pi8Fl5rNxPxBWwUOjNgpnH7j37IJ/EGC44i1rf2HSPIl+1hQL\nFTTM\r\n=w36Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFJndauTUjcT7AxYM+pe50yJY1oHdYhCT2FsLNaTsp2vAiAH6DsdI8XTonPAzpw6SuA4vdu3L3P7NpXGkNW1vUXDAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.ab5c0a10.0_1612297079553_0.689523433742816"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7a40b27.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b7a40b27.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7a40b27.0","@material/mwc-tab":"0.21.0-canary.b7a40b27.0","@material/mwc-tab-scroller":"0.21.0-canary.b7a40b27.0","@material/tab":"=10.0.0-canary.96878e1d0.0","@material/tab-bar":"=10.0.0-canary.96878e1d0.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1cdf08e57947b9dd8b35ef8599a58c0ab3c09e7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b7a40b27.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-e83RrgYi9IbGeQwsCw/krKrCBQVC2pkag95VSS50NjBeZ6KmkWcGyAt1c6fUyVrIJEdij2HKDnxU7xFWBbrGiA==","shasum":"6ff4a5fb6b58cc8512591ca83a92fbb1f506ba9c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b7a40b27.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGrt7CRA9TVsSAnZWagAAiYwQAJPobsZFMIl3LifLAw6j\ns5IJFTOg/laNoObcga+0tJxS3oTJ+uBxxIOpsuQ3Vnn6FdtH+0uMcSrO8+nv\nppFIZ9n/qzIo2ljKQAYEk8DUaNlAxeTnv2xy5WB48AtJtBfHgCeubtPe7O2q\n+mVuK1sB8RnR1ZX/qcN7T+vs3XKu+QSSiD4IgcSOEP9TZ7YaLQlhcaD7UkBD\njdk8sKUGVv9KrPBWW7fRusNYcwXTgdB39RVAqkMlTB7J11MNgoQ6Tja5zM1G\nc62q79ODFyu5vn2LyjyqFp70C00oak6Dx5nLbnI0VGMl372iVcFO8v49Gmib\n5WLV5j+rVDC6T+PnxgypPEOiUBAZmLgswNLwAqGjBCKcBBSvod7c/+507/TF\nWCyxsv+cocDe3Q7N4CmhMGbjg2FrKD0HHafpw8+/ew3huaqzEn2+kZvtlQap\nQld0aglnciv5zeq3+ATQ8UgAc8DnlobO5ufqsGaJw8GtMscPcAkUFDHgKnUT\nUT8kNDvF6Hr/TlPdKNlWFwNehWKRnKsaNbyYupQ6SaYTpGU4qmjcs87lWDSg\n0GSuf1PMok00Rkntp07gV3UXAl0l8WLl5xrVbiQOBmFCSZLfEy7JlBcAcmUe\nREqpGQ3Nw9aIJxKfSqfuHv73uvJn+z/HQOI0lXkjGCrFV3IRGKWlFU7JlJDq\n8Wn8\r\n=+paC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxkKC1NkgOUXmC6Duh3qQ+Kp7H+RHMmxHPfnD56XUxEAIgLuhAdrqD3gOd4/L4DEznQ4AJj4z9DzI2kMH51cEegTY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b7a40b27.0_1612364666929_0.7494933654822034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0fdee204.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0fdee204.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0fdee204.0","@material/mwc-tab":"0.21.0-canary.0fdee204.0","@material/mwc-tab-scroller":"0.21.0-canary.0fdee204.0","@material/tab":"=10.0.0-canary.8e66dbfee.0","@material/tab-bar":"=10.0.0-canary.8e66dbfee.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f072f9738076b381b1be472e9a6d239553e4d7c5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f072f9738076b381b1be472e9a6d239553e4d7c5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0fdee204.0","_nodeVersion":"10.23.1","_npmVersion":"lerna/3.22.1/node@v10.23.1+x64 (linux)","dist":{"integrity":"sha512-N/9wOjlCfsg5eX6a6TqYrLttLp8jRr9ZO3If8F5pSl429sKkpefxm0/V9Ae/E/v98VXAQVwySOWyvSFD3QfPbA==","shasum":"c6c43cd47729a10a4bc6ea4f82c04076fd12de79","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0fdee204.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGuzBCRA9TVsSAnZWagAATOUP/2a2AuA7s3SXfo7MYWWF\n2cusORzWb5uM0+zFEqfjC18X7j2+9t81OGlqZH8qw/YpytHpG2c57TWIEqcH\nnSi2uBFz0uTIW7gBeacK/s/+hTpDpf0372luHLWg2ng58FVlA3ecDbKQNCMK\njyrsYeKTyYZ1Go62BH0qjbus21rjho70sjjSgrSEaGo9pEz+LxGuG7mBIdEi\n2P11VIN/MJqPR+QKuveLE4fTx8bjA4kEFWA4EkSfkrk//KJGWBFF/nlE6rnA\nWi4hU8+AwLFJnmAeNIuc5URenKr4rK8EttUahNtOqtP26Z3jTmKJEngihFGM\niZroLgOBAOuPHGdfpqc1UPj6KDpBmmbbjYFC11xGEMDdmIceTrO2rLOl9595\ngUUHP6+JRiDRGeYOzySs3w2d9doRcYLeJLA5iOeoTKrCUGcAseDUiWnRQcVx\nWUBF5+t33yrsYF6E37vOUxtmWdOLHlMXQqqV8ExoijeTMrzSrL+DmpqEHrIv\ngN6/J6/yubUN9/POAYLj3IWMRUFxtjt1JMUGRya39KUoBpMOo4tI7NjksEB7\nmbuZ3JIRzzmwf9VMYhoDyVP/vX1KzPIzj1Z5KJWg4ppX9B5rS4eJ1G1M3pUo\nMSWcOewJLh13luCbBLU9U/LTszmWPHfaClO78wqYUd9DsdreLGwxUE75nraQ\n75pL\r\n=+m2N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBfykRcH1fqKGaOmRKFAit89qCrXmJb6Cqe27IF3CJMaAiEA+6WCc2ci3U5KXqt3VddRI+PDui8Gag8m0lW7o8+gTb4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0fdee204.0_1612377280761_0.5811356727205772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5160e548.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5160e548.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5160e548.0","@material/mwc-tab":"0.21.0-canary.5160e548.0","@material/mwc-tab-scroller":"0.21.0-canary.5160e548.0","@material/tab":"=11.0.0-canary.b5227247d.0","@material/tab-bar":"=11.0.0-canary.b5227247d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"37494b60e468d33d172953edbd3ca17d4aa342e5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37494b60e468d33d172953edbd3ca17d4aa342e5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5160e548.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-DcrilrsBdLWWElOoPUkM8intV9yw+7TyViLTQLXvosylildkQCOnuCjULxQH0EsXEJqPofaJhtDzdNRSBwJGtQ==","shasum":"6670618700815d8184cdda28ad634e862f7a27b9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5160e548.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdoVCRA9TVsSAnZWagAA9BkP/A7ZAd+nhYlBtxvgbWdz\nviG4IsuhcHDtUt/5bdP3jWBpDk6OnjIJXJN1OY5GJXHrFb6FypiV1wu5OtQr\nXJhQnKpPuam7ZshKmnOkg/RajTZ0T5V28/P+W+k0GCn5DTbd/aEet/0KtkEd\nT8u1MALflpFPvNcCZ9A1lzfqBkT4bSjm+mJbFayqS//P4Hhx8tQpQn069nFe\nLbJytYr7U80Xjw8izPvKjPzLIvLfsf388aj2AHIaKS9c7Kb5IrjDPYrYdaht\n/KB64Kcd/KhG/HCBPmbZ2Y4oLEaPQj9RyXQJq7HTZXH/VQkHMEwx7qA3eDe4\nu9ZAbF+Uto02M4DV3MpaMqDqPUXOaAhi4E2ZT9VS2b71uD5OwRMf4w0aJUIn\ndz9y5b3u7bgoopu/Wq2QDYGkX6RixYVUuAXuQPAoOLLj/ifqsbrHZFNtgysJ\nhivOuMbd3WPgW9IaI2GhPvaUWxhRYZfuRffKZrKj5rrim1Mz0Ioi9K6LRt+P\nsU3SbflJbGI3Qnxwy2co0uHKV+j/crJFGu+XG4Siyz5yd8+LiVFv/dTMClZ8\nVDfVGVMRA4zyjHbztBmFbMFPe7Qg1wu677TqeFOLjBJPMDvW9JYiefMIASbp\n7WNIRonQzuuxud7qQGnUm3St1E7qslqQsb9qzlUOM6boB8+4Jr8U0BqYVup3\ndG/H\r\n=KT6W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCCeCkGyrfXlNBKgpB0dDDEo8OE6yzzBUPcf+dSqdQ3eQIgJVYHSHm9Z0Q4U+DblswHDeRsKV/wuLZSqIHfKN4fMNQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5160e548.0_1612569109244_0.43866135463180833"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4fa2daec.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4fa2daec.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4fa2daec.0","@material/mwc-tab":"0.21.0-canary.4fa2daec.0","@material/mwc-tab-scroller":"0.21.0-canary.4fa2daec.0","@material/tab":"=11.0.0-canary.aac8f5d9a.0","@material/tab-bar":"=11.0.0-canary.aac8f5d9a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"49d5ec72e92627f861ab94dde045181b5eea9f00","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49d5ec72e92627f861ab94dde045181b5eea9f00/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4fa2daec.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-XVGvHEoNI2VhUnumEpge58tjcM8JYT3UkCBRyytv1m6eldXcu8bhs6C6wqIpE2tb9O+Ei6vPY/kwLT0jgzlcPA==","shasum":"a16ba103343acfc1ac15cac893c14b590614a455","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4fa2daec.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdUKCRA9TVsSAnZWagAAwtUP/RgZVg4E3cV9oZGfuWfY\n+Q8DevateHQvf+tV6ch8TUtE/TsEbsIU3zWi0oAsuczmA6cgyX4amFhGLtOC\n4CxOP+RBLTqF4hAykXrP4UMOfWTspCZnBrt73Xi9O5QpmCszyEA/Kwzhq4My\nW/6FrK0Vdj3u54wV3C0DOX8TqJtcBF378nDrNnR2x6IasoTtLQgiz5weJeYp\nLHv4OZoQxoRSpGJDxBBDmUkEMFCBTqlgVKR+3ZXtmURJUn8E9Jgyw62kb2JR\njIkNASBPkx/Xacy6xArxqaC/U8TFAsZP145kuWXjC/eSYpLu2FxBudXDCfTE\n4IcfGdOHn887Zbvw2ks3deU5p7akBoZyUSJEb3qoUR0UIneq6ZsEPLMr6RuE\nR5d/uTv679VdjEIYWVukz+GFEII/Uoewj0O4ax0djz+viRsA7MeFjB0yh5wx\nPSpZPevbMWTqcV2OXmfHqgiEYuODoOyTGNObylqtpypORP4HprTzATkg+8ug\nhQDSpp45CDgISlRdaLr8CRUxuiLkG2HdlXvk7Ot3MHn63Yna8CfdMo5/lOzg\n8Nb6jninBvavlYLXyTfQOE1dKULFFCaJwbV7sX5vuFsSrIwucBl/48szvixK\nw5L2UzqzQaa4dtHi5KObnb3//8AOAZSbZ0CNB/jFoAh+5X44mYd0kQuNLxRW\nu2tS\r\n=OZ2p\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJypl3qfFvsuiiuCoeODitg+FYZkVxd/NDVlNqI65ZjAiBnI/7umQDaT3a9+GaGrddtbDJOtPsKvK76/mWmWW3kcg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4fa2daec.0_1612829962456_0.004571161940791546"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.67f285fb.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.67f285fb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.67f285fb.0","@material/mwc-tab":"0.21.0-canary.67f285fb.0","@material/mwc-tab-scroller":"0.21.0-canary.67f285fb.0","@material/tab":"=11.0.0-canary.750e18fc7.0","@material/tab-bar":"=11.0.0-canary.750e18fc7.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/04f614de1b88fbd5e16a537f0b7e3f2f9b015a9c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.67f285fb.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-OdMwAQ5/i3T//Nto5pUsZiBHGf4mlkr1k3AFPympY0GCOwGpSazs5k7VLCz9IMOFjmIXnsOxVRlmQSNroXyuqw==","shasum":"d66c0b5676fc680978dfc39fef4fa0b3729ee6f0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.67f285fb.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIdyiCRA9TVsSAnZWagAAzsEP/31F4E3zMAh/owuVgawE\nM6a2DdCj+xFpnhfsr8pVokFsqyUklX//NE+sLllqPUwswx1Fe1QpGr5RbiFr\nO9BSOELjamVs1fIrGuvipaR6U8xlDm6kx06EJBRy1z1v+bsgs3yB0hhHKr4C\n4DHBuHSSISx4kgAvf2K1XgEvZ3DZ5eM+ilYIpEACLiHfTxWRT2Hf8U47L4BL\nIkbab9kTrnpudT56Y3zBPcFwDi+6VjTj2N+JI9VoM6h6iH7LGDBIkTAwwDeS\nY+w2ERDd9W/6DRTxH2vbIPc9SJEfrqkLqw8jwom2ZqOWSToIpnqUg0wwEER9\n/96yFaa1ih3dR39K3P9xfXUgM6SQu1SkqAfEfhZ9zJcgi4NLDx7wfhpY3pio\nPkVy2yn9lb8CPHMhZeCpGX5/t/wZ8KtIg/Wnkrnml5F/ZJQyBPJjywDBxQnF\nmkegmi09H6qvnzyytcPpZ9tSF0c5GGbn0X6KBWQVOBMhBjX7JoS0XOENa+AY\nlK2ulLzsI66+Sh9pVQP/aGztKs6H1qenlSoj7ObckfWMvXZmYuSsa1cqsmYo\nhn5Gz5WPSeBBI7jQlbmenRHyalEhtFtHRp0YEQS9gkjfc/K4pe4dMf4e+lMZ\nhQtLtc2/XOT2N/gJ5+L5BbdTmdtl+4IRbdCOx1qOSRoMq4h7vAa2+l/ZmHlX\nIwF0\r\n=HlqD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQ68QOt4ENXrmyBig9E1+/nHSTlNUtDwBXAoSBnjjyLwIhAM3L+AUtbpACwQrd12TR1pKpcY5lH+Ud34gpR2mInKID"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.67f285fb.0_1612831905746_0.9625936472418248"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.58cd5a70.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.58cd5a70.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.58cd5a70.0","@material/mwc-tab":"0.21.0-canary.58cd5a70.0","@material/mwc-tab-scroller":"0.21.0-canary.58cd5a70.0","@material/tab":"=11.0.0-canary.b62b1266d.0","@material/tab-bar":"=11.0.0-canary.b62b1266d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bd3f430e2f5a541d9ff928f6eef5e0f06946dd6d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.58cd5a70.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-J4nqSF+wGxTwPCG8L/uHeLGduxdLxQ1ZUcgzr1CFTenKv/gK58kEjravLOBhjWvgJzI00n5HO2DoChiGdyumvw==","shasum":"af477d3ccf30f8885dde59a91dab64ab5779e627","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.58cd5a70.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJZd2CRA9TVsSAnZWagAA6N4QAIsJM3X3Lkw5tAE3grkx\nzUwuznMg8pCCSpSd2iyYgqj4DuestK8ip3yqXXrGPvp1W5F5zy44x0BVSKoC\ndHP2+bH/QegErI4825/dyEOu2HDNbBltIzV86ynW3bvqsbizVnwskXgyGapI\npRO1kyILNbRqKECFC971i1UymqEitGOmJ1Qbt2XHHkdhxUk4+lxS8abslQaR\nIaM9y4CV4hQOA7Q9EL2zbgUNHfCsVRgIaSAQPPmuVchrTm1bNiQFHck7YpKz\n6xpom7Xae6tsjXCuS/GKLxpEXYvWt9TQ+RrhAP05yHXLAuAv3CysUW2+9iEG\nP83n4R3ZYwdXpfJGoy9cqgSras05ZmSv3H/lvKngYVujl0fdtqEeLSMuu/qs\nYOuJevaSV+61yuI5I9kpsKAH4Zc2rbIZ5dgFHnJNxyM3tcFlmnZgh/AOUDR4\nPQwX8ioST0+59D5Az80PJCa2eiYAmdFKsRvX0LiyyvfGd6mcZOAoTvrm/ZF8\nI4B7mqRP6TadLs6uZQuUahHLfSqVannxA/mr5lxCHpDelMfy7cCHOPjlGVfp\n+mbZxGWIqePq0U8R8eq9ZEZG/wIMwNnrL4+Yj6JkEv+PX4tDcNENYLfrW3sD\nk27kNbMBpUHs4mB6yO8P0tAObQ8llEFcOVXi0d4Y1LL7ieVfCKd6U0+cf8+K\nt7WM\r\n=CRHx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHQ90NLiFXIsH7QEimYkvVJLYY/OjQTI3XQGyWPdUIsxAiBTCyXi3SCYinck6DU66Q3Gz+R+6H+yZK5X8ZPKmUrzuA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.58cd5a70.0_1613076342252_0.8940988589001131"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8107ca43.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.8107ca43.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8107ca43.0","@material/mwc-tab":"0.21.0-canary.8107ca43.0","@material/mwc-tab-scroller":"0.21.0-canary.8107ca43.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","@material/tab-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"579eae14a8b8a347a0e4b31bb6650c994d1df472","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/579eae14a8b8a347a0e4b31bb6650c994d1df472/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.8107ca43.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-rkujBjkgfpwrT86kFwHumjP55zN3YzESCt/NiM/sbwAFlYN2v9CuttAY1qN/rTOYjKdGZbCvhlSe7g/MgpMj0w==","shasum":"7f1dc198cc0b9fd75008f2dbcefc142071c594d1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.8107ca43.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJb3dCRA9TVsSAnZWagAAyyAP/1Veyfe+HvEr1mWphs54\nFOuytrQU0oqI1KuXydI36TN+Un7GcUk4wHr0GyGgqefpxNKfJ3+mv7JhZwPu\nLfFpS1eGXeJGNemFpHsYikjtAjz5j+K2A/qvDfQnTY+k+G8vs3rAHg7MWepZ\nPCZXU5PVMSxRVA9FQbgAPHEuB+wkOy053CDYM3J/6zevUYDomeEt3h3kn3KP\n8bBKmRl5L8KB5KQ1RbAETCAk6r2dy/NZZ8uR6Iq3A5S9E5zDKOjLafGok7pF\nfBwXR4Ag0RtgMzxCRu66g5G9WaG2uRykyMUoHpW8szsu1X3BjG/36VcRCms8\nxuTI5dgcc1K/1ja83JXBw4NwCfls7CWc47PoOutWOHTIyth/cIkDhjhqu+4t\nUwortlnKzNM+nu/pM/Le0GAOHS0Fa4fLRxtZYrhaZm1d0lF/Zl52CULu22wn\nstUcSQvpqAIsIs5lYErsvbRU6Am2kra8BCTJ5CmbzksxxI5IwJBtIoKDe5US\nFp2rM7EYYTTe5TqNPwXPyWgtCJJVSrB/D7/1/9qqUZNpJTT8dgGU1OD10XmU\ntlJHLsrXT9Caonp4Iod6EMaxlb1uFq9vGGQY4/T2H1cZhypvWL33hKQ1tWMR\nPBnDm5ZUQWvdVlLeImSgHEW+VkVEKWCbvuQY+Lrd3+xMaUp9Y4mFjZjJRHAy\nwhVt\r\n=FZfY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDACuojnN4//xx8vqTL+VnFDgo7hS0P9M6xZ74Wm6awpwIgKzDHajSS9FI+9E3AxG0AKXS8NqQdizY02aJph1VOs9s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.8107ca43.0_1613086173110_0.751160168752115"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d35d64ef.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.d35d64ef.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d35d64ef.0","@material/mwc-tab":"0.21.0-canary.d35d64ef.0","@material/mwc-tab-scroller":"0.21.0-canary.d35d64ef.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","@material/tab-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fabd01c45fe7a18430cbb0070ae8b3f5d2a9dca/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.d35d64ef.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-6VTEjcUC314l8B2kni9lULb9kvGqbL3JIRCvVs9LjLx8No7hC7OQ0XY0wH9WIjtKxH1CyLUJB3rQiAq5MJcBOg==","shasum":"3867e749fe396a32f4cc26d03375efece6ae5349","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.d35d64ef.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcEtCRA9TVsSAnZWagAA2/kP/238fOsMNFUvENkm7deC\n0ia3j5ELVXd2R4+qbZka4hUp/39y/T0APGPSxWYoNqJlllqLunjICmT88bRM\nclHPhpoZDlImIwlECz6tNPh/URjS/JUgAe7PAvBUHihZXAQbawqx2/CZ2nDS\nQ3Zkfsvq6xys5YbJEGfrXg9rHTXFakfTnQHHi30YCA4HTPboxNVJom/Rg6AE\n6s6DyHmfpF7JsFV0jO19uzut+d3FXJzHoP+ss8MqCDdWHz9YRTMuhb3X1LDq\ngaXZe3AtJM/6H/+Yp6hCRyvjYn9iBnjMotWgeEJSmGEoxhNjCqUOcKaoU9I+\nxXL5zc3MWmngt+Hduws520Ze4X4+GHCgEeb7dEOyvfQ63/85jhClQwhIKEpR\nW//wfvxcEpRECoxa9gb3om60xTQYH7DzwpYX/R5bNTEm5k8RGJauXLPfEeET\njAha10ZSOJHH3+EU4CWBoJv7Hm0GVBl9jkbQaSvOszxZyhXa3+ep9OKL3UeU\ncEGaW1Q0A6TCPwCy0gtkmfS+m8ugmQHB5krbyV9b8exgkn9E97wmt9FUUKWQ\nnjzFJtotPFrNKIISYdCw19AGUQa6cTKefwry3aOK7Y5JiOoJW7B5IW8a/38C\nfrGCwHr3S8/DfF/1VvfXGVerlbz9L9jy2d9GUUVwmrNK28/kbciD2jcCoDjS\nFQGp\r\n=pUlP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOgPjlDY3FRANbBMYz/q17z+n7eDBImweBt8CBkuQqnAiAPMGMBkRgEpUYQ4/m6Nq/LYpBD8MyHk+OvjLOjrT6GoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.d35d64ef.0_1613087021312_0.31776783491858973"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.78bcf058.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.78bcf058.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.78bcf058.0","@material/mwc-tab":"0.21.0-canary.78bcf058.0","@material/mwc-tab-scroller":"0.21.0-canary.78bcf058.0","@material/tab":"=11.0.0-canary.a6b3101fb.0","@material/tab-bar":"=11.0.0-canary.a6b3101fb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"98a4001d56b1e200103e0862b83b661c87fac551","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/98a4001d56b1e200103e0862b83b661c87fac551/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.78bcf058.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-tLumKwOCRQWQbN05haDUPsymdvF7w3VvR5gaLBw5uF1IUpK+1ProxhD1PiqxotsZvXJv62cuAgzeewGyXGjktA==","shasum":"dbcf7c9f7bb8181e927ca9de5c95b4196291f2b4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.78bcf058.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdB6CRA9TVsSAnZWagAApP4QAIPnavpEf5ZomyjXfQtI\nBvhCvHojFYK3nplBf6YED8UMbezs5mG8rncGCimyJQAa8yzrTsYHQ4+KYzO9\nO8aY+pUscAmI2xQOApe7D7EFPwHnQZA3RLzzZo0deRFl4jP05Jm8YNuRlO1v\nLgOJtTy4voUVSk2vLsU90MU23f/b/OT+0fqr5LXDPgsXRsuydkOFJzGK4nuc\nghZkD7XCchoAi9FySK/Id/oMt+4zfiT7GhkzBkfnrYy4xs+qi0yzo5OJD80x\nG/SGa/xSAd9lJ9osugJZf8o3sEy4ySIwV7OCB3KVqz1QH8leXBvMS9nmmLVj\n0EK37Oz0FQ5fzInii7y0ZZ6InO9VHm+KzU1fPEzEfv8PgZ+6nzoO4E0iKtds\nCIlAMvZmEUkV4Z4hL+1VVu8jL0oO4IW5Wg64WITjO4GgU0Ylwsx8s0/vgo6U\nGA+6nX5vU4nIeeRItoFEEcy9AuIROB4pe09sCU958P+jNjyrKpDvV+AJ2t5q\nBKB7QUj1kWvd8LHDRcQJYM1AosOmwFLc2OrfyIfPTJPJXJlmit/b7+ZAR7y+\nHBSERgdNLXqN5SQDu5Sy+u9ox1RRyxDUWCc/1oYv6Hy51nUq3wLwp1Ql/lfa\nWPGcvuVa+zSnYL02CuM8O+mDxVel547qRGaeyuKq5Zrp9QN8l5sz2rqmRJYt\nsFLw\r\n=2cKI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCtDobmZENiJz7VA87erjbXEKFSTj9C6So/LjZeGrROygIhAPQV7n3VWEBwMzeQQ6ohxK5ZdYvz1wJlrUl7U1XxxSVc"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.78bcf058.0_1613090937745_0.10167826976380057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c6908fd.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0c6908fd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c6908fd.0","@material/mwc-tab":"0.21.0-canary.0c6908fd.0","@material/mwc-tab-scroller":"0.21.0-canary.0c6908fd.0","@material/tab":"=11.0.0-canary.ed88df700.0","@material/tab-bar":"=11.0.0-canary.ed88df700.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f290af657508c2392a786548f206e90e8bc44124","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f290af657508c2392a786548f206e90e8bc44124/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0c6908fd.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-xGEQ5nsdSnLc0y6RCAjRpnwlYl/KbEKQ7Uf7AWobEcwhj76Oc1fQvJ9A58TVeI6WBNF5Wx70Hs68liozNvHFEA==","shasum":"6e0dfcc5a4d79d41bd55147a7eaa394a2bd9d039","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0c6908fd.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJdkGCRA9TVsSAnZWagAAGIYP+wXhTbWobdMN1N0Ak+iD\np3csATOcSOzmKs4+78gynJOfbjfyGeG7SLf/Lz6EesbGNMXi5C5vyeU2Uea+\nXMUZjG1UefAGIS5bMDNiIweEjts6b91GfDiQ46b1wr8mX7G+rnqp+9ePkKa4\nlo0Zoog+QIi570X/8Cu/4oKjiGUmv/wSd6S2m3VSkU3S7M+S0OklcgarWGVT\n2JgtmFsAETa816bxXYn7u2Hd1H83Im81PcaUN7ifMo66Y7uB7o9C0Elh8kBA\nCGllTIceCrmiwrD35igDNqdJSMfAFAAuAu7Xl8Sg+wbRFps8rIitOPsX1ILZ\nssNTUDpGTXa1cR8uuy8KsGAKaUP46Mx8TtnB3MSZU6+npLGssMBu35brloae\n4qK9vfBXcmp0pNpPbgqXhDbTg2UR8nc1NQ4l36dmaeNPR5FKRJPXIU9IUfLA\nk3sG51CUQCtxKMKl0lJFxBCDaiMlUHJpth+l2yDQyX7BV/6bA/r7qI6dAzQ2\nE3KtffNCHOY+9oDZMXdYQD7TFwNJPTAu+kh9AraOIzIl2T5kTEYlQwCp8vVi\nvSFoDMWb3NzuLm+F+ABwZxj2vCZo29SnnV7/NNZZLw8JLWO3r0Jflu/GmWvR\nZemtgPJdJGFAIfMnnjMTLFU+qZM/0g1JWwNOxMNjAldQF8InA5q7GPIcZqjk\nFcPO\r\n=CLPO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCM2DNff1IBTD2p7Vsk89iPp3c7Hu1eE1gebLiPr60R6gIgD6T5LRtUnzl+MYEfhQE60nINEatjWZ8xXL5/j7RM9ho="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0c6908fd.0_1613093125760_0.5514682793481687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f1f34ee0.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.f1f34ee0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f1f34ee0.0","@material/mwc-tab":"0.21.0-canary.f1f34ee0.0","@material/mwc-tab-scroller":"0.21.0-canary.f1f34ee0.0","@material/tab":"=11.0.0-canary.71fe9a067.0","@material/tab-bar":"=11.0.0-canary.71fe9a067.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"b16a616d2cecb5d8aa3c279c76b01b2f49ab6965","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b16a616d2cecb5d8aa3c279c76b01b2f49ab6965/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.f1f34ee0.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-IQ7J5W+ImOBm+QwvvlxoIu+xz213oRZxaQljFk9p1n11a/MtfNybeHL+WQ5/AeAIGmcFoDbI5Bz+6yncHfGnqg==","shasum":"be1689150eadb2e27e62ad666ad76ef5bf0da64f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.f1f34ee0.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJuKfCRA9TVsSAnZWagAArTMP/3XBot8vgM0vT6yfdSQb\nZ/SXPSv2w/lb7hdO3hIP9e7MLxGUWbdZdrSLsNVqOizMGFQbPnc135o+7AxE\nl7nJn9AS2YKxnyihENIyoBUR4Gffa/GNl2R13pJgRHAuL4YkqVvVnhkI7QUv\n9gci8F6n/Xb1jF9K8CiuAHCNBZo9z6Izq+EdiF6NmxOxT2jMiUgsM3vcBd/W\np6YDvvWNgbJr3MBAPy3VeD1G1t5vlFoFnfC3//WY79ONXPETzTMIyV6yby+I\n17xS1PAKEpFVJH0o7h/9fkeubWuRy1IMbbKItazmUZX5GWNgAcwSActPPUhR\nmiERKlOCd2rWLkPRnaMU01gNfe5WOx1hLYDqH4G9T4sgjRqSF8o0t34LDnTf\n180Fxf8aEjHqdOUJC4Wnu2LTvSXCm5+Hy9QfNMLUuZA4jh7u5qFVvciMaKFv\nzCoHZ4OLO6ehCXFX/e4laqaZo33T5qXmUVFKcbA1+h0cn8SUCOb9VxxYrHor\nsYxu1Ye8l/YU/GkJg3n5MGdt9gjGZmDzf0bRLiKycXV0fLzbFpAqVfdaMPrz\nW1/Cawv29kqZZMUwyiIJvqGi8BaSe4Ox73re2l7vsihiix0QrnOnAtnjDYVD\nJ1tSUmpUPaefpvRjI/j5sqtM65H+A5wvB9GqlDrrwaakfAz9SWUS5zJMJPkq\nYajj\r\n=5Dff\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcdsfqBmmMctE/BEiux4TVN7h/5Cs6hG0mjHQ6xU0TMwIgM5CnfI3rHUKuH95jxx+E6SyU8MqAvQWojVxJxODYeA0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.f1f34ee0.0_1613161118621_0.31461065571231983"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.d84df029.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.d84df029.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.d84df029.0","@material/mwc-tab":"0.21.0-canary.d84df029.0","@material/mwc-tab-scroller":"0.21.0-canary.d84df029.0","@material/tab":"=11.0.0-canary.0fd56a86b.0","@material/tab-bar":"=11.0.0-canary.0fd56a86b.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"af09ce2e1ef6f6b486ea977ab8890e81af842541","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/af09ce2e1ef6f6b486ea977ab8890e81af842541/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.d84df029.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-k4qTAcilOGcP/xxw8MC2s2aSJmFjkOHuo0eQ35G+V65A4UkwiZYT5FVKYCTA7CuvJ+dhVQA4KAZMUEqV9d6sjg==","shasum":"4713a9c940ad718c893c5dbc210e8ad1e6f1f19c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.d84df029.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLBhNCRA9TVsSAnZWagAAc+8QAItCk/4xrIxMHo/DRi8q\nuvAyccT5YT4EsS/rn+pZETNDRzH69dYM4jMUuwco1isoel5k/mRFzILJkD7d\nHNWLz98Z6FWF0ZQkyk9YKTASkoapJp7KRA6XJqcvmGqro3/SdA+bOoZ8OCcA\nN8BKmscVTYylIHkfzPJDDstLeiMN9TpT3BIeTemvQrIevMU2qfyTgsMu8WZh\nYKCvtcf8YHETv/he6nf4ZZPWmJuxSmIaF5r9MWPnzGKdCZyOrCG1B2+fDUep\nJFS4ko/jN3V4tMGr9zrVSk4soY8HSyRO6bia291zQV0iifDzIwzQ4t0TBrHL\nC2aImD21K9FQaj7x4Di4lm0zWUjKqys0udlDQITcfzEpILYz0Wd0GWK/jlur\n+yYV5tOBjqXZO+Nbqh4GPk3cK8J5VehnREkscsRUmtCLorgqZaqesbwpp1tm\nG4VPZG16wz6nFAe/4gSSXJMyZS++axxPSx0crj2LyRsz+XOKowuHyVz65eaM\nAALVOmxs53O8QPu8rpB4yJUC4rYX4pW6YnpoQ99j8qRlu4+YXvvhX0K7QseS\n06n9/xsoEPZFeEfL9DnEIku+qKE8TAGpRH/syUjF4pK7TWSi9QkIF1RipNUg\nGJkELA3qUsm/Ft7YVHvZpbKsH2sH5SXXWvoXjEw2JUtqJdP479etrof0Pdoc\nsHCn\r\n=tjkA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCHxqau3VJRPm0D58dfKO4ZZfgQHr8BoFAFyYBP0uaiZACIQCwPJoRwzvfKixZpzvdxjoZHu4i9Mt9SzTJwRF0YSPR9A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.d84df029.0_1613502541549_0.034075813868491345"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c525f471.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c525f471.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c525f471.0","@material/mwc-tab":"0.21.0-canary.c525f471.0","@material/mwc-tab-scroller":"0.21.0-canary.c525f471.0","@material/tab":"=11.0.0-canary.f9cac96cc.0","@material/tab-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"eb401daa998f20b7222c2787e22c669e642586fd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eb401daa998f20b7222c2787e22c669e642586fd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c525f471.0","_nodeVersion":"10.23.2","_npmVersion":"lerna/3.22.1/node@v10.23.2+x64 (linux)","dist":{"integrity":"sha512-ylG8RLQbJC+vy3utKVEOtHu1+sloHh2wmkLiwMbzQOx6ylsMCsI91UytpttFotBvRNA2DwpSRNT3Q7UMpDzj4Q==","shasum":"32c8cb648fe5556efd8e5e8d26ceca1df0d50b02","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c525f471.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLYJyCRA9TVsSAnZWagAAIJkP/AqjODy7FwiLOT6zuYmq\n9aTtgFO67yH5Bbu/PpE0+yIVkCKPrCwuZpwPgex2nJLZryw9B5hXZH0eiV3V\nXMvK+UC9TG4v7+5MnPRn+PZEe4ov9mkClpCeM8buAf+2bgeR7oQOUEWyTlVT\nOl9N9P80pfvNgW19i9MxRGcQpvsJxFTJ369OXnv++KjuB7CbjxOAiS+mULQW\n4ldZZJJjQBuxepUXD4u+XwyFUOHw5aFzX8J5SYZeSYVRftrlIRDTD/EtfP7o\nMGJgPVSe9P7yVNG+eOjfPpJZI8PhAxQwAliVLtOpGjV2BGt5fTrYfkvt9Qn8\nnAgHv8NxjlUe0vijp8YSGG4t8hukNR6c8BrfYaLOOTupC6KZRadBsgov/HdR\nuwsGN2vQvxcKO4w5uikTZ3n5AJ8BOOnd2EGskFrTOGsg3QMGoDWOdIrp1YbG\n312zCc2PxZSY2ErdbIcgOtBnb/6AUqcW5aCpAcmhHZHDLws01IWs0U9QjCW7\nsMcKCILoZnDUTyIEXVYerOSTfwXY0I4V5C5Lrud06dIfZALeb0tG0vzsR55b\nJFPQLdtB4ul2I9UNoWCPJbmde1AjUEf1Tkk08Ms2KrXT0u9i6uCUFqvCSKrq\noklSBUHzPnGkDAq44qlpAlEyrF9JcD7EolK/Cy9YaQWNY5+dT1Qz75BnvJQh\n4OjZ\r\n=Q69m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgQfeHMNqhnH1PJEu2M6mqLcfLZoIExgB5r9fU+TU0PwIgcBDswa4AaqCMoRTBoz3SqUtsrn0BwiB5S9N4EureFQM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c525f471.0_1613595250299_0.6760207765854098"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ba7a1b35.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.ba7a1b35.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ba7a1b35.0","@material/mwc-tab":"0.21.0-canary.ba7a1b35.0","@material/mwc-tab-scroller":"0.21.0-canary.ba7a1b35.0","@material/tab":"=11.0.0-canary.f9cac96cc.0","@material/tab-bar":"=11.0.0-canary.f9cac96cc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5d1b1f5b6c909a9e26befcb63e69de98a9b6fba6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.ba7a1b35.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-vJC3m4gPRLzQ0KO3k/SO0dbF1O9As+4KMIxpmh57vN4DwxF9uMcFqQpFM7ZaP0xSUoYY9wLfVJZJ0yHcmiHsTg==","shasum":"410893b62cae7e4556197aa9aa9a82bce6fbf4ec","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.ba7a1b35.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwLtCRA9TVsSAnZWagAAGBMP/1cHGfFX/J1pbS3SgSOu\n864U10AW9/TBWGcusxEG9zewmM4OAnuGslOfEAtxucpok4HaPfaUxMZuH+zp\nesU9xxBPkAFKwZDFjeH1BD1dwE4sjv7+p9T6OAFPszopJy85nVimd6tBap46\n81CPBxYpPZ1YZr0yDh7WIqlXE0FSvfxVi+jOULWqlNqVZ7wpe3eXcvZQu7DS\nw7+0DgSPAAIeuPUdBGA1X3nSkTiv4S/U+H5zhLIRb/YkvGm7BCXXLj3WCpZK\nH57KzI+Z9wwNqLdLY3685CzFDNCaK2GWhy3OCoLICrmVg5bW84AFnCYtUqZR\ntB1N28UpD7XVWCGOR4jks54Y+q7hlgujYmw/Bh/kI+54n48Gnd+klmt8iIsD\n1zti1bi0mkYcn+qtUkYp8rZPMRzHzU7ymRVCYnJrmM6eDzLZcLehKIOGyGnz\nt4aXzbTQfEfrhD/RVGsZYWfCQu9ckDPDxEcUUADpe4SS27jv8y8N0PV0e+z0\n5MadRdeEShFl+GhHfMTdM1h/W7jsExN/05OYPSGIA1ReaIJe0NV03eZS6ai6\nLe6r9Yz1XON0JnaQL2Z/05WQb/Fzd8t8Si64dzj80dyE/asTsIOFpmc/e3wO\ndkFofgEhmUkJlDPBy03GD/wW7JdRbXspFZqZYpf8Vc4qEQIYM5181PbSDSA/\n7blK\r\n=1Ix/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGD6FjtYu+SbKE2BCHAnEaZHWVYOrIFrwd6IFk5G/RK3AiB/EUfg5S0NKWHniZagyTf7HGqkQ7kW1EvTTpIHqNzYrA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.ba7a1b35.0_1613693677200_0.32578517623233316"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9a566dda.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.9a566dda.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9a566dda.0","@material/mwc-tab":"0.21.0-canary.9a566dda.0","@material/mwc-tab-scroller":"0.21.0-canary.9a566dda.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5093d1f8984fe9f44acd6597512a2de2ef5fbbca","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5093d1f8984fe9f44acd6597512a2de2ef5fbbca/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.9a566dda.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-VChuGdygk265y52mhCbNJ1OV3N1zz1mWbRet9pB8YSe21y1GAYfRdpnxozmojeI811VD2e4GPdGlpMeMAtO+Mg==","shasum":"a5522ba64ea9e3a1e698c716f82a30266123de79","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.9a566dda.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMAW0CRA9TVsSAnZWagAA6mMP/36jfiZ2D0XPV7BCpSgN\nJud9Y7GpmFo0yC4/MKaQIIaDjZif+A/HuWC1t3hKjWySYOFokSSasH0k10QF\n1DfWHQZtWn9kpIU8Vj8QvzJh3cnvW4o5i5TuxNXbzb1l5On4Qm8Y7GT9zu5V\nWssSuD7p+CmcHbbpyHUwy++N4CcdvEMqRLkCjYBTXbE8CPxICrPFLaPqBu1Q\naRY7/NNOSGiHk2MKZXExnwFlWo0QJk83tnpz2g6efFuQ0vXAjxMsiaIMNggb\nhgbddrVGTg+c7xGSsoTxfKMUBHffb7fhPIKUqxW/r8Gg9sUeF+hrVsQ31Fnh\n3AnYt5GP1QfbmBIYxynoqsnY6Uvf1zOaQbIOVhy+qjasfWkLwpGRjjq7x5UV\nrx83TyhHrR8gWsuYoBNF6rfmziUUNXcHzXJMM9ihxc7Qq3W13Rr65pNK4hTM\nnscseZvIuoqV4+bJxXCLCs62l71k5kO3xtwVfiPSxFe6EQUS6EBt6CMOGVm+\na/xNUWuJogoCKyn5tuXzlXEtzQEtJLnqn+rqCN6vRmiv0hPBZ2Vq/ObfaZb2\nWuXEyxNT4QMSTkaqYX73kqq26n0dYqStJSpbQx5CSqbq/Dv4YdHcPdeR5Co5\nI/nT8wB4dD9FjxYiI0xmghj8x8oYUKV9iWVbAGGmfeC6CyJ3W2pcFIX/tAUl\nVMD1\r\n=byA9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8tbZOpWC3a/48qDGMR6AT1LwKvQxWWu1wB5WpQkKg6QIhAP6tLUZUbFcSiyybJpuAODrWrLyHIgTFMbV8fyUcxm73"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.9a566dda.0_1613759924330_0.5046428834116314"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.55addb8c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.55addb8c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.55addb8c.0","@material/mwc-tab":"0.21.0-canary.55addb8c.0","@material/mwc-tab-scroller":"0.21.0-canary.55addb8c.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"02634c071c90f7c1124ae44f34cb20a61bf49350","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02634c071c90f7c1124ae44f34cb20a61bf49350/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.55addb8c.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-L/Mw8sJaFWGJ9plzJLsdy/bh0WrUGiNp575KO5m6G2GR9uCQ8+SvhoAP8pE3M4uhgVa6RED90CcQmY1R42Fi7A==","shasum":"17fdf2f57622af57b429abad041533ca18efdd03","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.55addb8c.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMDWMCRA9TVsSAnZWagAAzBwP/Aqei1SI2Ncg7mt5xcDm\nLHHBqVXO5HcnaTPYo9uqtfvsbO4UxIUBjbP/g7Klu9I7KXOepqkYRK4OITmg\nOrpYP2ZfhA0JWcVMrWuDDbPQHhohRNLCLXTzmVPbSeklmnSnO3qitxYoXHk1\nBZS9AAF3+G11+Rq7UcOospWOh7w7T1Z9DB2F+P/+yOFAu6J/5e/vqV5pU1cW\nR0+rydyk/+4DldRZcebu4GxjHdJ21dwkN/pX7nkGeDm1oTC10Dq8wz89HBaD\ngp09D7OMJr4cmnI9tu64nwrxANX80AWg3XWENFLiDES1rnPgNCjs+Zt+E++1\nK1ShgFVSyjDYp4Ymgw0HvzzobUdcu/sSrQF1dYtKGI8rVIAC06OjfXvbroZ2\nGxEP9CpB0q14nue4pts3JTDC+xrEABr1rp9mvZVVVYD7QtOYAYFXveZMmAPx\nwvznLK9K6NnGcGtvC1R12quSeMyEb5Hq0PHjKclA/QuvVcRtQT5+MWaLJkNi\nXH3n4h6GyBlvp+dQ/lduA2R+ZqtbQJWNxocBafYyG0UgeVgEd+ecjA7kiZRW\n4B4ZA6yPAjTG97jzsHBq/Vl6emf32VvfVU3gs8/Z4vrxdMy6AwvArS2LQjOJ\n1/4fktTDFO+QhtsfJTXj6Wr9F9iupcUalLBhpYMkslP4TY6CbnKXcfbdplB9\nxWMZ\r\n=HYAl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH3D1ondLK5rWSbIJNqPDjrXoypxpJs2jhqp5MC2QQWTAiAKj31jNjZiO2JQiT0dAEuRrNoJ0YYyiNLjDBHX9oW/qg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.55addb8c.0_1613772171877_0.03937206490907186"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.85dd5e9b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.85dd5e9b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.85dd5e9b.0","@material/mwc-tab":"0.21.0-canary.85dd5e9b.0","@material/mwc-tab-scroller":"0.21.0-canary.85dd5e9b.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a723fb0b68d5c0ab6eb13c066a9c255b58d1e19f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.85dd5e9b.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-p3X6P6DITdw9ovr6E/0HD0bvfmvRX2uZifgS3wy/31lEPmNHtncxHQzqd2KxrV9T6j6ca23E8GG0W8twYkXKzA==","shasum":"768e3c4e03642a7a57614507cb3d37256b943983","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.85dd5e9b.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNGZSCRA9TVsSAnZWagAAvWcP/jrsb3UUE9zhhfJybB+d\n6sYqlJUSLQ58duStDF54vkP/1ZvMMhfAc6lz/Od7jBdsZ6BYURAU5BkBCi/j\noEQ71xi0rzPjnARbKtQNNIT29zrqLlEAsAWbl6XrNrbO1++Lbe9PIoakIlUG\nvXCx/yPo0GiJsRXwwlF4UXVTRq+WNYNRszqDXOaiJrHtsteJLUQ4uI/6lH2o\n1Y2YUO1oSdrpyruB+L423jsmV3RIiR/qvUc5XkPcGWXZbttBTQ0Ond/H42mL\nJcm/5j6pf0b9yeS5W7X4uK2f6GmCHvMs/2QY3ZkixuIS6Zdx7sgVnwjCHKPm\nyciBRibXVdxcNznYQhU6vqGgzYyn8QklQx+Tx2BNduQFxV7MpdOHL3mPe7WC\n/zivSDf6H3TMTHf4JTu05M2dotPK0tw6Y+Ox1mF2griIA23VPYgdNV/jjeEj\nwuhJ53qeRG/KKhJIM/MBPQOojSjVmT9Ud4abpVW3NJQ1casiv6ZDDuhxAOpS\nd2iC1rbkCbRJaT7LhNIqq+HXkT+Eq5XOPNOu64xmnFny9BnzcW0Ll4djrwbH\n1NObor357r3pXFlohgPWrCJrlY+9GGTzajlcMT9qiiADRWIbQFB+0hK2DvsY\nXsXHloQ82IrCVsudmYkHTWK02SWzG744qDOYVsEtMicT4apzrLhM7lmih1dB\nmcB+\r\n=uLVu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCW6ylJ9n9kJ5xE6mLIX4iwCUp8QuNP85T0jQeYDvn7TQIhAItD09ApMQV79kXf/zXTtK9tqPivCirv3jeCjDlGmChB"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.85dd5e9b.0_1614046801729_0.7436507202216103"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.aa3e078e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.aa3e078e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.aa3e078e.0","@material/mwc-tab":"0.21.0-canary.aa3e078e.0","@material/mwc-tab-scroller":"0.21.0-canary.aa3e078e.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2acbbc6ed6d9f649621ee54e8265c9d26c49f634","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2acbbc6ed6d9f649621ee54e8265c9d26c49f634/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.aa3e078e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-mKUYQFwgbZz0ho9Y/X8t3/zeH+0FalZz9Le5ypTTi7PWxqZ1zbu+mOlz0pzSjD4av5PZ/SB4zyRDQRryVu8XMQ==","shasum":"d055f93254be2709e0910f7f349d7fe3c31b8ee7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.aa3e078e.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNThMCRA9TVsSAnZWagAAUbMP/3HRXUlTr4A8I4ErPjSb\nNM0ZOqgpbCJngYLx9TTOCQVMKN6yiIo0hQalJ4wTO/1X9xndGxTjfCnVu652\n/Sw0d1Kb1QWYkaTuCO9wWhggdUf+JOeHUDqwmjLufZOAr82DCba8AM++lIDN\n8rl/3BLgUXwmc1JA9B2KP1uKBssGY7v/KHcA5lNJ0oPcnCm1uo2NZErRAsMv\nFJHzjjojRcUOrR155qZN65D0ZZLF6xMaGdW93ZCPJ1/gWn8u9XpaK2VknVUO\nJPeyUKxY/gecdfg+6FIKCwvT9wbSH9QUTrrwtEuz7HOvmfhJ7++wQsj/IhEs\nPO4axX0G1BOTPbiwkkjc1ip6LXQ7OM4dGjoS4JfoKtyLuKsH6NPy2gJx/Mm0\nXeWqkzeEaMxcnBLSblD5QZuHc+09sWRLhmTaZ3WYf9UgtlfEr07sQWTXu4Fl\n1uf90E6B+fhXFCZAEqbkzT5K+dr/8ErY+DAgsuK5JpJWZS392MJ1bvFuy6aX\nQe5H5TRCdkZUGX2Du/WjDKDj7rgcOJxOInmJ5i79NOukEZrnoFSEKW/FP/ak\ngja7bweKc+HKH7lEAYTl74cQppE8OStnIhisJvkk9VGa0BRhr7t22XwApku0\nabtDb0ziETSfbSpyKg/1lsg4cnKlh0R+sc6LOHwBRq8wLhWDcna3M3XbjFlH\n5wuO\r\n=TzL+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCGZHXpNhnnekC//6ICWQE8QyN+LSUOQrPx03CldRYixAIgLjsVgI1sT4faJfz10GCkT98JX628iMPxQCOeq0MCffQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.aa3e078e.0_1614100555682_0.48304625512246635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.dccd254e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.dccd254e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.dccd254e.0","@material/mwc-tab":"0.21.0-canary.dccd254e.0","@material/mwc-tab-scroller":"0.21.0-canary.dccd254e.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c3011f1d9328f6405596f794c28c98485d9d40b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c3011f1d9328f6405596f794c28c98485d9d40b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.dccd254e.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Xoo5FboOKkdcDHEmreGl+w0Tk98swxrj/qSbM06xizXfmlrJXNe/srcNAz7Wr8WOoEyzVGAUQ3QsMHkn+uh0oQ==","shasum":"0f185e2a61cf7b8a2bada011a00901150c54ab9e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.dccd254e.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOWPaCRA9TVsSAnZWagAAvjgP/0PAPI7akj5QKC81GBGe\nCaXtMuzzyW+RAFDKnglu/MJKo17EVBNe2FvtEGFc2VlH24CUPY9sCQh/t9ly\n296W9yWgBitFkv349PgfI7HnHi4dD0zykxr++CR8ffV+HcVtEDkQzNbhSZ3p\nwJaitd6HdqtP0Hn7L5E6rQwbjlk2UQAlfrla5E9/D2yMJkelILCpcIRL7dJE\nhfb67/hZmTpls0pISSRuYlu4+1+6hWv3B/Ux1eG4pWvrBfNq2AkrJlN9kKSj\nL6g4oQ60D0THbzYacQxbZivN5hdevgWwj7Hl1qfwZ1Gb7Nb4SCzJPAi4SCoa\nRFZONO1PtIINVshbC87uAz9tXtOoJd99767t8RttnOVdFSfq2L8pkOV/w7sr\nXuo2ZS90uk2XIr9cQWH7kyaWDfiQSCnBEUyR/biJ6ggQ4+MQk0VsaDvR1uzo\n6t9ik1LSLi9m0TGdOalXaDTmcFHGCLCXNkioMFxkhRBTHzuf6Zd6XaqfFyKd\ndjSIxKCYrvqHzteAPSq4sUdAiv5u/h+nv0JQS3P2833eQoQYG1J6cHrjhmdr\nUf4zgwcwoJZuZNdXpM6D5Q+aPQhF9zCpRceLON1pXkW0fwH0EvuRnAu2Llrk\nW15CEj6pwZHifQqbXiDpu8onwpgHRKpir0aZJWe4aN1CT8kiV/06c0W/B1V1\nsz2w\r\n=b42e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB8wMygZaDT8VzHpaVwGKUe27bEwVPgfNjPmVtR+3qXkAiEA/ygbCtUIkeePQau0MFRmgiGHqwNJ4CMOq4bJuiAsDQY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.dccd254e.0_1614373850433_0.47623727459100174"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7dd1a27d.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.7dd1a27d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7dd1a27d.0","@material/mwc-tab":"0.21.0-canary.7dd1a27d.0","@material/mwc-tab-scroller":"0.21.0-canary.7dd1a27d.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"15fa381ead1eb4897aa006da0f445765fa9a037b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/15fa381ead1eb4897aa006da0f445765fa9a037b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.7dd1a27d.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-a3na6ppQd+k/MyXVaWzrTEU48jjhXwsa/LbaOmCVbzY/qD1BTjzfb89zJ3avuV4yQ0P4J20nF0iodM6UtAMkPw==","shasum":"9677ee9a6090a886fc175c58867c9704994c5f82","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.7dd1a27d.0.tgz","fileCount":13,"unpackedSize":46813,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPWRHCRA9TVsSAnZWagAAfS0P/AobiILHcS4zdRD5Z98c\n71J+Y3n/tgqK4WA8rK08VFf6z+6o49KlYfEhAZtLZ+ekaGZNfkBkC6knzduh\nPEItv9Ibh6SmBEdb+bzZICmBdA2KHzHuerWpRqCq9xMIj4vhzJJAi1PzoUHK\nGBq0dbhO0hJnrfdCkJQUqOe7P2vsvjECLHptq7jxzFEx8xX1+tW233K4I4lN\n6iwpP4HgIM9hcOvLnRXt2hL4sCh9NHFQRPVE3Q1OLtvVbCE+bJCItlZQCDFn\nV/U9VVZyqs5EqiZ0jsK0TON8zF7gQbaXrMdBfSpBH8PzKH2fW7GOaXwhNGMX\nT4BNIIbN72Fz/Gx38jOFwmD0wj7in2bnNQgS+3oJLF5Jfh/0sQmmh4IjF7Ev\nYaBeT1x3P/x+8tg5JbluhwH7OFzmkQTy5BVUzxDr1ZWp/JjmKBLWj867/uEy\nkyG50HhsVndbWSO/C4sPKaoSzG/jkEC744/O9+JtuzL5SFjegqoA0FnYDygW\n1TwBwIpL3Hoeq60HeM67ol0Z+qpVvWYax1ZNygV/l6Su/Mpdg3swuaXBmVwq\nzD3UvRc1rWVs1fLaWdqHTD1p3O2NnO8GEkN84lstLpfqVoL2ISwY+JU70njE\nvKvmU2jz2tsMTWTlwbnCS/lHcs2v6cCxzj5sinoWRtANcH5oHk+Zia9AGxA+\ni5Km\r\n=YXty\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCiUrpztf/vveuA2B8MiQysyxVjjYDVTfC3tPkoUBMJjgIhAJvDvuuxI1uPYmm0STEg0PtvSgdgWs1WnNZwEPwcnetg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.7dd1a27d.0_1614636102482_0.9215644360825201"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12574572.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.12574572.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12574572.0","@material/mwc-tab":"0.21.0-canary.12574572.0","@material/mwc-tab-scroller":"0.21.0-canary.12574572.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"043d9159945b812192eb864b33d16f892831b4d9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/043d9159945b812192eb864b33d16f892831b4d9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.12574572.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Mo3b1nFM4xQNSRjmHfHwsJ1l0jd9IMgIFOnnmva6pU5w7f+RIsDGs/v+UgA4rl+xUxpwcXUv6Q4jlQwHvzY9Dw==","shasum":"23636e28dfa97f1f7f1e6800f4f4ff1be6f83e65","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.12574572.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqBMCRA9TVsSAnZWagAA5DwQAJwWpfpgVWqgEl4WqA8J\nA8JmztRbZppHEcW//Hq3jPJ6uRooKWdHf4Juw7TDrg56ar1KlMYLhhA5kgU7\nKPRw+iXnzs+AO2Cw8JGXx6+yoi/96H2SD5N0YG0w32YTAS+24kyKUs9ngzAk\n9GUwyNW0gUthNqGZDXMDKDsUgISf1wSBd/ZuSggHiXxVBstjch6ZDn/0SrVY\nQvfcGoJGZFTGiaWCkaX8c8FzS/ztsbVRYA7vt5fOwj1hgt4zynPfEeQ97f1M\nLbUxc8EdWxN0eBBHAtQUUkTb42pT5fgrVc11TeFe28125xLuQNIIRSInM/Ib\nUsn7Yovz7Z2VZFa5hBNk3ikdRSFkTYItq3GSl0/o0RRocMc0l82s+agiiZf9\nOT9YkamNU1situqCRfvhHWwTCZ+iHLDHiF2lteN7yFxxe8blC0cqyHHH83o8\nXu/XWjn2W38EB9igEkwy2f1Q2hASbdyNLQrroPM9tOcqPvTinh3ZKYa8Tmsp\nIdtxPBFVgTeXuYZcbji5OsjUucJqX2JB70SQ2Ju3zyelIAs81w06EQnOzCmM\nuIEq6QEoIvK07bHe5t32WNed3yXX4OqnU34QpLoI8zxKO43G8hyIVPjQVXXj\nNQuwTGxCXqBhTLIwFcEuc+QTWyZJzHHRVh8NYHqA69Fb0iacx8EeOP5OsuMe\nAsjh\r\n=R7XV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBSvwH3sI7tBmUhmcxQN2hN9R2m8bsUxVDLbRksdAQigAiEAqI2xVGfFXZq54LfxGXs/lS/Bor9BWzndUWQNDOmUU60="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.12574572.0_1614717003920_0.40748784255647785"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.1109a3d3.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.1109a3d3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.1109a3d3.0","@material/mwc-tab":"0.21.0-canary.1109a3d3.0","@material/mwc-tab-scroller":"0.21.0-canary.1109a3d3.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8cdd512cc62bfc703a1cc766d67d04509e4e0c08","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8cdd512cc62bfc703a1cc766d67d04509e4e0c08/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.1109a3d3.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-eaXiCvaEtnqzKhNeODBGQ27+QuAoja46507qRVCDyZM5629AfNv0NaJFnCfQxjYbEwX2Uyye2zzNkO26Yz0/nw==","shasum":"a1449c82aeb251dc88d0cad698ac926e5cf1de40","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.1109a3d3.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPqGKCRA9TVsSAnZWagAAYH8P/0Y65WdfjF73Mfc/uEzP\nYw80m54jF6oBwib4GLmjS83JYT8FZ8V7ZaX7YRmsmlQbtNuyTshdCewaIqLP\n4kX629dTWj7Lv5XFYKPhyrj5OvUElT0jPc4IpIhg2g+HXqGK1Yvcjy9PUXTs\nhSxmcClrqKRKDuI2qEvbvAGsOmwXuXzdvib4IUyeWe4jPJmNGwFT5Z/3EptG\nB+bxCpkcyuw2DT9BM9Rllv+02g0z9A5m5VBIE4P36LXQnBAFwzgsxTYHJMZD\npfQzLyrxdPSKajDbLz5MIRAdxstnS0hY9GMn5PLYbDyCkPckkf5yZeJesqIu\n3ymkscv+ZbNRkxt50Ktyx9sbJLnxgLA1entFhRcWa6Df5R09tKQzcLajLMEZ\nAOErfRuXLPAwwXHUz/B6e8lskKtv4E7eKVkgmDsvKOvNLNHxvgoW4WjZPSuj\n0kiUSP3ctHigvQqwc2Nyo49NssudvprAfSs5T72Wt0TMUl/CMwAcqJFvfODC\n/C/n+037GPdQUaFA59MgiJ1ajue2ZQJ7mTNSOxf6prP3xGdHxlQYK5WVaJWK\nyqAayDYfKj/PtglKdj1m7DEruv+y9PmAWWuisT9WjB8csU05L98FYrqvCDC7\nZY/e0l8RTKXOwZbHfwrZWCyWFWEG2J22OOqIbecCeXkP3P+Xh1uWZYWZnDQ2\nzUd9\r\n=MXYc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJEXRVOXW1omuL3dGQ6a8yr7o9yfxU9T5Y+cY2vTlc0wIgQ43E/54aIWgNRvUuga/uTghgfpR+8CqrwsuEFIBrXMQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.1109a3d3.0_1614717321888_0.3337762473734529"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b9cd8739.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b9cd8739.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b9cd8739.0","@material/mwc-tab":"0.21.0-canary.b9cd8739.0","@material/mwc-tab-scroller":"0.21.0-canary.b9cd8739.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"89fe0448abab4c371af17b2866ec736d9ebd8cae","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89fe0448abab4c371af17b2866ec736d9ebd8cae/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b9cd8739.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-xoHTFyVZq21OlNNvFiiy2+kjjlaZOkuue2X+wwYG6W5dHFyMAyisQHy5MiFqOKP/Ifiz+CGJm23e5630vB5mkg==","shasum":"228507ee149e66847ed943f527605879458aab7a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b9cd8739.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP8v4CRA9TVsSAnZWagAAPxYP/RQnlkPTseVY8RbcF0B9\nQsFBZWMK0F1wuHFqjHRiKmWPcIWZ2X/pqZn4j1fnj57a+Nv7XnBsZga6dG8u\noz8gzw7wLCDb96R5OZ6hFFpSCJrKeeWEpYVOg1TU3Y48Zoej84C56/AhzUtb\nkNY7h1PJmtmp/c7OQiAwfHdUlHTW4EuxYUJc9WzZv8L404YkP2lJWZZOBV6G\nUDhBqLtwHZ7a2lE3wMsiipj+ZMnnwL4pqJjN1iU5tMEMvPdi285h24I0aCur\nrY2eJJkK7IoZRhMHBQw/ZB6Mt+gAUR17cd7UCuQJKnKg/kGLGYoEsYtMRy5u\nfnXZSMzCaWWjy9Es8g1CeETQh7TTgufZxrNQeEvFB8+Jh2khuA/QbpMtke8K\nXFPQSUy14E2ICk+2wFe++wL8PUNf7DPflL4eGdn77Y+IGnt3l3q23gIfqG+8\nFwf5I8CA3iodqYR2gFrybNaWrbnxjyfDQ2EreAeFikcKlu4ff+of9lXLsDZY\n738IdgCmHEZuAAAWMxoNVS9KwP142Sj0L0/nFWlm4GdKfhmgxil3pVi61Ed3\nuvqoZUQpg9gZi735SFC7pQbaSMn962y/mv+GyHDevk3zvWF4thvpOXsddIhz\nIynptq+YKaBh5IKFuggO93jadY+/iABTiwsuRuMHzu/jO0bTpcosXK01RHBr\nPgV8\r\n=MEfC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCi6ePxltQJd+K5KNbRGWzWSyU0Sb6NayqWYj3G0nyZNwIhAKQHcRfXBdu9W2iRK7xzbRomafcaNcBfxbAoIdrpTvNV"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b9cd8739.0_1614793719973_0.5613297213831805"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.71ee796a.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.71ee796a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.71ee796a.0","@material/mwc-tab":"0.21.0-canary.71ee796a.0","@material/mwc-tab-scroller":"0.21.0-canary.71ee796a.0","@material/tab":"=11.0.0-canary.0b4a4b2eb.0","@material/tab-bar":"=11.0.0-canary.0b4a4b2eb.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d989f6470cdcdd144c7021a4eb0ea47e63945cc7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d989f6470cdcdd144c7021a4eb0ea47e63945cc7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.71ee796a.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-64+Rmt612y5DZ+zfK3eChA7CVdd4GP1CoYFgiodbAmIkC0imo86QsKpdKbkmghlNR2e6k+aXSEObvM+ugLiFNw==","shasum":"d18567fdc7b0b29f666c8e49987b7677506e3e2a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.71ee796a.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP+2ECRA9TVsSAnZWagAAW2YP/3X2gOkPx5TvVwQU6a4K\nr1ESQ3JyA7OlB6knoJH9LvQSY8v6zllGUMUlwRyyBd5VLFEBiitgB2uJfRM0\ndoFox4jbxo/NADKKhLqd1RExcfk3lTtrxeuPke1bU+fAbomfI5eIs7UbczUn\nJnMwIYCyYcXQZjkHSbJoUWB118F0qiXV3gTPHCBhDequRkru164iuf8+YAsv\nFuR1kn2pJga57vg6X2xZffSgmiFWW3g3tMMcGY2FJmPLrWpajXARHc2SeW+8\n0S+Od1O/elAV+MIffZUpkPJ8aCbrjb98BJmOx9UZiATXeEcXVaSEIayG2WS2\nR/tdGNlPjLOm6klbVfhpILww8PeKeaXk82wF0qkGQ/r9AQygFgnQqox9IFnP\nsnKpzKnDmjiyq44ImDInk8IE7oV5SoOSdrAvEU6g+xYtGrDnCrLDMCwe3ur3\nkivN4AomBVoYuLSdAeLa1owSsvqwsID/+hSlKPOuOkQvaCOr9UJ0wCvg/RlJ\nhunjMEqpL6VY1njQrrAxlsuE4jm5etIUfbB4Ty9wUxNuSqK5CXA7pWg06v2Z\n2IEyhUcpAEw8AvvYrIVH5I9L9lMxfokqYnuclfVRJ0hY+q/JgrkiJietAs00\ngIIt5G3UTP4oxPgXWCKhdtXVOuGERxVHvD0B1U27F75K5ejK0hK0xfsmMdYt\nydrE\r\n=0pdL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCr0HwAlpk6mgv96RvD/hN+uO6XlbIXKwhRJ1d4WQ/SQgIhAPLky0kxnNjinPqtJ8OlvI+Bq1GdFSPgzHM8WxZsnUcQ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.71ee796a.0_1614802308195_0.7866523031116872"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2be191ed.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2be191ed.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2be191ed.0","@material/mwc-tab":"0.21.0-canary.2be191ed.0","@material/mwc-tab-scroller":"0.21.0-canary.2be191ed.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e273563187c689092eb053c50fd9b94385380fb8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e273563187c689092eb053c50fd9b94385380fb8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2be191ed.0","_nodeVersion":"10.23.3","_npmVersion":"lerna/3.22.1/node@v10.23.3+x64 (linux)","dist":{"integrity":"sha512-Caw/h/K+hRTJ7jLYF3xmrSpo3dB6jWTrISpUKfV2Qp2uQJvUT3cp76Puo5CnKEY7ok2lFX+yWFNelcfLCCZrHg==","shasum":"c077927cd9332cbe6e2697da7ee7cb1ab02fdc8f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2be191ed.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQAUSCRA9TVsSAnZWagAArY0P/31r7MCs8GS0zQMxG3Uw\n3VDbZjE/KoHIRhMOJi92ICmxZ6jbzGS3oWNuUhd8LORE00xlaMQE7mkZfDwW\nRywmdm3jN3DV8qNIn7AfeIM/bUL4dZxl3W/DvyTSGtUztaxVtHXkV+JB3K39\noeORvaaQD79/mT7kPnqKEVbK4l3KFencWltQrEu8KeLPI/MXFut++DmMnswu\nL5VDvC4nWnr/HkQ3EcUchQxm8OugwWU1XzDktpohL6oLHM6yOBFJzpfhKVcC\n8x2yXFa2X1hZr82qJa3VPmxo7qtFOydErYbYm0ix6skxCsC1xAzfOZmSbfxn\nN4ecw+fgxSjqaadnTaDD5UJ550l1YazmwaAgBmtSMKIOewWJHh31VNTgWv3J\ncoGwITC1Glo2FCqHAXfFqinBn3K61Xt5RHtlMwZ7wFGKDI4Dpemc3NbGlWac\nfX5nw9S/nSL4tWEK5zE7dawRxo9WQ6ZwIvE2MSj1AmTnsriHOMmf6hj05zkr\nq9FvksNHrJza6okmZtQ6DWXuYDd7h/yyyXbTR23f77yR8sdBwa1IzoB+LvWH\nHRRCppis9R8dwE44xWGrLlkI3Tsojs4QPA3raRn+wxN8aiyeTdj+rLDKodoR\nHm/cepudU3XobsYhWHrzdB1S7AwtkEKfbJP/kPfLG3iB6LQZ9LGJiu/dgv5m\nuRa0\r\n=+wr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEH5RuZxVa8T+LZHeECnBO91VN67Ok0MQcWtMHgmegmEAiAFd7k3ueBsoIvtdEicaeqNKvMTUVj3JRfUvbZcYy7EjA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2be191ed.0_1614808338093_0.2924204716021799"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6dc7b06f.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.6dc7b06f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6dc7b06f.0","@material/mwc-tab":"0.21.0-canary.6dc7b06f.0","@material/mwc-tab-scroller":"0.21.0-canary.6dc7b06f.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9a8a072daac91e9fc841e2f6cacc0fb753ada76a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9a8a072daac91e9fc841e2f6cacc0fb753ada76a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.6dc7b06f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-7uDMT5t4BYsezKmoeBDAvfn89PoehXXf+bd1+EA1AfITG8QMTjs2xB6TGaFy9LEJqJ0LrlpG19wuHai4iRv/qA==","shasum":"3e0453a799291eaaf5d33a9e16f1aa5a52dbda85","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.6dc7b06f.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQXnnCRA9TVsSAnZWagAAuNwP/Ruo7lXwsUy7mmLd1Uza\nbkUr6vnZyfvqGFrI7L0DmY/xdfNPz/FNZUh5sK0wYWEoKNgpew8592fMRoZ7\nXOWwTzUEyawEfpATjqaUixs+aWUP2JVCJwV+HqeW2yFrQtYDJA4rNWc18/ip\nX++wYwK0E2nJWU3GeygcJvV7Iv+dXulh39wTxL+nzvQKFIH4+u73Gba/exjH\n7/O6f28wo/IGg2pkm2LvGCfl/iT9rUF0DLDF4liDX8BB5hxi895xfGIsjwka\nT1t4r33SZKpbnmCY/ca8AjgpB5GRi1t67iUZOE4ogNj/i+e2NEoMoRepK3qI\nkLQdsyoh6GOmUfdgApJ909cFYj86+jRW3ygcbnuFudzfQjfisbQbK20A5th2\nzupUhRSHZF/FkSJ+m2busZ7jRpBlcHdYD2LzW67N45ApNL7OwXUs9q4OjaFN\nX8lewPgqebCoaErbeKQ9ULacgKBnhmPqpSIR3KFIFNj0mh93PI3Qcw3Irg5r\nkNrveRE99q3faat6h+Qru/Z6lXhes1EzDLbZ1/LJG1xrPoZECxllLGTfeKAx\nXRKr2p8/30WacBWJ5R77EmCF8cz0+iprJFyLSGPu7tDCf5SK1CO27Sxcuh1g\nVzX9oZ2EDwcb9Jw0BSrMwcGyWoe+DsW78IrASKSI0eZAuGIWdQ15QOUHhJEp\n5QWF\r\n=QyFB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuNBt0ep683+SS+LD0KZtjV75EL3yNo3cZY7dSAXNc8AiEA4RI+XrJiv4eULqojstneyAPVOSjRLUwn7qvGjkMgw9c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.6dc7b06f.0_1614903783353_0.95395655022057"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.24fe7ba6.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.24fe7ba6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.24fe7ba6.0","@material/mwc-tab":"0.21.0-canary.24fe7ba6.0","@material/mwc-tab-scroller":"0.21.0-canary.24fe7ba6.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d87a6c320af38bd078f91bc9ea457c0e21cea9cd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d87a6c320af38bd078f91bc9ea457c0e21cea9cd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.24fe7ba6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1kRb18C2F0YQ1sKx4b+b3yTsZ6Hi15WidS8ejXGi+65Rjhxg1z/WLj+kHwA+NgtYGYmMYteYcYPJsGE/9qO52Q==","shasum":"44312ae6a43f73a7aa0a5139f2b964000015d090","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.24fe7ba6.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQmoPCRA9TVsSAnZWagAAWm4P+gMOsNrZm3vQxaUo0qP/\ni22qBE/uzfJWyVcVYUsX7vWLvXHqG3bWa0HU5Cp2l3cbjN4kZaFI29Fgfhpt\n+YWldYztx22fYl3oAbydpdK74jLhxXdGYPo1VvJYwBhKgvKdHWKGbOoAU+vI\nevks7+21ZXAgD/4P5uwSni7EzBnC4iJQ/nvAv3Gp6iEcuuJ0YCIWfHUQW8Ff\no3cH5ftX6+7CYadJvj3NbZVrY6ykvJ9iquADeA+4eSJSXicPkYrUF9UCd7MY\njhhyrYnTb+2Cw5B/uK2Rj3IfRPGAZKbFBoQRACPYg2wv/zAs1ZV1Ce0HYNf6\n0SsKuUVKb+wTxcG3F6Np37bnrWD8nvXaKmVbRwp/7Rs92GXU2LiRaqenC7G9\nu3ruqKguWJRUWOxPF690oH04cajTqdxYBVlFOKE0gbe1Ym8hOgoPqO0G3Cbm\nMnuEcrVRKmCwF8Th301mtLQVnYruXXv0yELs45vEV1YqyMNA36J1t7txmwRV\nJtDCuo8JZYl0WSQ12ARL24fSBVB5awj+vN0Q7rUd6s4oyGfex8UzlRdxxtwn\nJ0sJ7w2AH5DGrNEw+u6/6BAMwmVHGmWy46y/misHT9SF/cYo9rb5M/sPUzcT\nD4SES4XP1mg/RK04X8oF3ppw0zkJWtIsdBbyV3BD1oSELnmgNjNwJQ96hi87\n4vDJ\r\n=r1JP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDD9+JvD5qkUWgjZAeHrzYwXAyEq8IXmDK8cjMOl+LLTwIhAKcDtSWvHDrA49XmrRnqHZ3kAHMX42JflEL0yb3GCnG7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.24fe7ba6.0_1614965263082_0.7333313551428107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12c477d1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.12c477d1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12c477d1.0","@material/mwc-tab":"0.21.0-canary.12c477d1.0","@material/mwc-tab-scroller":"0.21.0-canary.12c477d1.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"ea7731f325b77f7ec93ac77e442625ecf14e7f25","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ea7731f325b77f7ec93ac77e442625ecf14e7f25/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.12c477d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-kALFGrdTCwTaCc7MrhuTAQ7KeLLOIXqSxH/kLB1N4pFruXufujPF8f9ecwoXYEW1bGc3jUvNAHR7QRqPQglG0Q==","shasum":"fd1eae0a71d0a239e89b6f0d737b1cfa7cde2776","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.12c477d1.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqQHCRA9TVsSAnZWagAA0iYP/2MSjIEmavYH2vJLhHLx\n4SogAW1aM3ncOfStrAC+HgkLSvu1yBDXNcw9mW1JkZBTYSxB4Ssb4rvSCZSh\nbuQ/Vl8/y0S/2dModt+aMynMtz+cvaa0X+r/lD8V6BT7Lkw6Bh7N8tBFbmTy\nw9K+2p/U8XsSHcu5aqjt5oPKz9M53tNTeGd7D7RIUh+P4Fx1iIV1WKBUKYS5\nBFqPkgXHGPW0MAa/tBAVQL+xXD7sh/ubt+FoRE9rKvEPy1GODTtlmcmzLmZk\nd17+5OKzpPMBsdLSvDyKwIwV03iPtTGrhhCvctIQKVhHEQoi602yLAF+IxBe\nGSuZPDjuOJhqDgO6OHvAheZNtCK0b/nRxlGe8BPyroYaSSLGh6CdpyDneLIR\nLx3OYWGUkP7f0ESYTSbdAEEbkTtW6qvMIBfZzXQegjeemVEREwZaFQMEvS2V\nsjf/wJ0csJsLg9j0M8/lWr5AWKhJKwcU+J5+jJ0t5Fky8N2aFnw6LIjBN0Y2\n2LKY1spWjAWSlxYTA3iyjV5JkpqZpYHyvo7T3kBdskuvwqLQxJZimtsXJ6Qc\naQTdeoECLDzjYsW3pQAuBEGvhJEMqFl87rtikQH80UwyFRHoGFdPCgO+i164\nQyS4LtCV7tD0Y2UXpC7fFayNUUiVCBKYbxN3O5KYLcimIqHCjuJarYcx1tEA\nsGae\r\n=d6Kw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFvPVxzzFfeyWNYpSHz6SJ7jWG/VppAwjYr8Ie+kVf9vAiBnxgEvg0eVsMsX5irjWRes/LBog5yXyJPL/AMaZk10Og=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.12c477d1.0_1615242247371_0.7102396448122004"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4c38f801.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4c38f801.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4c38f801.0","@material/mwc-tab":"0.21.0-canary.4c38f801.0","@material/mwc-tab-scroller":"0.21.0-canary.4c38f801.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2f19e904d6306b3a12d41b0158ca0c3fc34362db","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2f19e904d6306b3a12d41b0158ca0c3fc34362db/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4c38f801.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-McDlfcNEDWVShYL+nZcUIVaPWMkeYBj+FTgQQovwGyCO6h+DREffuhan5JxxoOfLnAmMwlNaSR+HYrfuk4OJBA==","shasum":"ae69bcab0c109e27718fcf3ccaa7e88f0458f8e0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4c38f801.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRrJfCRA9TVsSAnZWagAALm8P/2fTrSXKaP8qAgoqsK2+\nV5v5mVJ0+lIWVkDadtnlYz0p3/cNTWZRMZMqWyF+XVn6HOT5xzC+6BCnEP/R\nidUg2bW3a/+ve6rZAd47gOryxBakte82HhgU4CkuDInEcz73HbWvAhaefzX4\nw4XMz2ecBq+hauO0X35OFh1qjYd7PcqqHGdISTUzskLGmv0futVJ7inx83se\nX5UGyapp6C5FXEVXK/ZLEc091sKjflyBVpJscGduIuF4avZ9o8mFSXHOsH7J\nJkoaiyZSBXV6NrtBiVef6HCEv3CEXdWWfJ/hPAW7bepPdBCX9joAnuRYiHKm\nth6pE8kATDWL40uDo9nSaS/0xFBp+u2i7YU1PzeORDGL3gOj0Ze9gRc3R0mq\nG1xG4SqlOJlzDvct5f8FA3AKCB4GXwPZ8cNBbphS7xguRFJkXZIKuKPqSzHt\nO3EK6dt92F845UfSraYnOb8gcpRR/yKcLogpa8iQn+YXjwkfPUBlQW+UJigW\nn7ESLMdVHrAWz2W0hBtiadQO+SINwIGgWHX+p/D9my5ZlVHIoC6h4Lf0Rsqd\nphch/DJsAm+IFMsuLmZnOSL8gT8U8JDSuO1sihXTDc5bYRnokMSIua1JE6aE\nkdJzVLUJbjVuCkPFSyb0RJyMjdMheASZXAb2V67toVSzxPIwrqjmyfx30zcR\nZ0G8\r\n=on7H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC/tkuWVb+Kso3gXfPhHOgJPxJ5c+kITgWTGmy48shHiwIgSDvnvB6bcJ55ZedaiVhJTYzZbQSR5ws6FFQHfMAmIoU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4c38f801.0_1615245919170_0.5574168665194374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.8795b83f.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.8795b83f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.8795b83f.0","@material/mwc-tab":"0.21.0-canary.8795b83f.0","@material/mwc-tab-scroller":"0.21.0-canary.8795b83f.0","@material/tab":"=11.0.0-canary.c7d98fcde.0","@material/tab-bar":"=11.0.0-canary.c7d98fcde.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"e3e75af3d23a6f47c66e86d2168ac672364726c5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3e75af3d23a6f47c66e86d2168ac672364726c5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.8795b83f.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-nrfvyjjBNuv6MIAg7aPVxKBgmixD38BCM3NXuiqM5TzsqPlVoRxtseSuF5bENeHJ9krLzx4ryfdSCVD6RuPYnw==","shasum":"5110f94486e7b176085efcecf59601c646dd21a6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.8795b83f.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR743CRA9TVsSAnZWagAAjuAQAJB/KzJSqpRYy96pR2X8\neZ3Rho+axbSfF/4jOma/KS2rzA5R2Sp6uHJtNQd8h4fsWyo/HSKTBkp3VdQO\n1/CYtz53R1lALHw/okb/fKPPv+JDEv7BReiMhun4wcwNTdvur28+41552tal\njNWyfYLqoAVaQIpDuIy/KyIdboF2xRtORolcgOZ8kltaqDArtZhtPJ2+KhjB\nm6nVhC8ibWV/exOhcjmP7D7cmJ7bYyiBbxBcouyqtsSNEIJZrzxVL0/E+feN\nDlCimAyN1CqF9gZ3oCmw+gyoe7l6KPBE5fbkpiM5P9c2Upkfg+qjoqI6+GMF\not0m5aE2933GoD3b2irL2wFnDZjL6OvjfZSThjzFWbbJuUUV9gS+ZmqgDWzW\njlhGXYrpo3oeFDbtk0ylgg+19RPzo8pzrAtyV6+1ATmPoPpJvSUXRUBDWsxR\ng8NIRWlLrVzqKLkzW72BymXowDQVGe9hSIBue+R0CQT3/jnV4BGE7kDFXE+u\n6y0BKiLVJaPDQ4HYwsDUa0zaknJV2cb06Ti2LgN9Db4viGoKJUyCCXub9isD\nYhZyPAOe/xOZmve2BS80DMoThqPWxJxJNYWwxXW5Baq5Q1kdbbmKIfrU51Fg\nR5vbon7KfPGILowAvocar1kw8fKlyX3a36sqhXsof+2JLGzpv3M3bwCXOmJv\nnRGU\r\n=pxc4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWagmM8/0uj6f11wZr5HkjXC6nK7jOGxtSZz5Plnb+7QIhAP4euaTBDMzXm1eV7ZL7wv9DHmbehUqKFmN9lUZnRj9o"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.8795b83f.0_1615314486739_0.6362786588714531"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.12b84cb7.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.12b84cb7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.12b84cb7.0","@material/mwc-tab":"0.21.0-canary.12b84cb7.0","@material/mwc-tab-scroller":"0.21.0-canary.12b84cb7.0","@material/tab":"=11.0.0-canary.7522dcaca.0","@material/tab-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f49d8bf5098f7acbc51aaf3dbc6880cbd46a2e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.12b84cb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-hhpLpFfMOfMiRjuRb/ZO9+QT6KbUi8Aych7L2P+YKgdiBzvOxxnG49MSVyZ7V9pHbr5ZLfucQkPYcJKw2IilEg==","shasum":"5be023e6de7aa13d3b9033972d011f6005f9292c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.12b84cb7.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBXOCRA9TVsSAnZWagAAxz0QAKFtLhO0X8DcCTxy7Cjk\nZCdRqKEGdfgEJZOfIDs0XWrylcXEiaxBMzBWM3TfzVmt6q6xHt9uCflk15Sp\nTEme0lC1laCWLZEFhLU81x6xBAsAYw7rgzmGPV/fbSBapwJzMly4IF1MYbL1\nsgwhwUh6blbn1vU4y7xo8vzIIxzSy0Yc4mqC6Oo9FP0GOdyiWcCqfq24Ar9h\n48jqf5eF9Q/Vm54XSnCviCzZuasRfnChRxqYjs6OTaU12MJYUNFvl2JurzWA\nxUE+bZokzRiw0vnv+G3BjzLisw5xjginZLa4BjWBfPfd5n/f+2Hi4sq4htiG\nlXYk8QbqysHD2UNaGnqrbtuRbwo9+JsfRu1/Zm3wXMctxEn30kwyKq0Qxj7E\nSu7EOQAUCqjQ9H9cfNdygBYB7EMF8X+R1IyNtknkncNxzJ5MNl41LEMukvKB\nbc/I20EhMmUOmR6SloT/K52VRKfl/Xe4JmYrOwAj5N7tl4amg7gYMIyKWSi5\nsjGYPPzgGSFXDdasx1dHBO6bha0f9hsB0uO8acpxuPFx+GtK8XCMojoLMVwQ\nlVuSoJFZoroH21L7ZD8wwDWsqpMTQwxn90Dc18yDH+p3HpXNI2Ofw2j9n93l\nNcBf2ruyRoYMu9U+xg2+Pm372bY7KgAhztvi6+0IBVAhFERCubjCLxnDRZYh\nhrZx\r\n=mwSe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnlZuiWoyf2o+CQgqQH/yYRFfEHyePheHaLBUcbbf79QIhAMlDnOUlmx5i2Qb1+PRibFKNENq1pDtTbiZ7VpuDiFtZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.12b84cb7.0_1615336909803_0.7219025308510567"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6ac6784b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.6ac6784b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6ac6784b.0","@material/mwc-tab":"0.21.0-canary.6ac6784b.0","@material/mwc-tab-scroller":"0.21.0-canary.6ac6784b.0","@material/tab":"=11.0.0-canary.7522dcaca.0","@material/tab-bar":"=11.0.0-canary.7522dcaca.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c60d8f8df8e8260f94f9e15fccf93afc356b0634","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c60d8f8df8e8260f94f9e15fccf93afc356b0634/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.6ac6784b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-xMrPAYa/A08iy7x+h1jkbx4pxZlXRNEWq/3vNc7vxHoSwxZguZqptv/HWYL3z0H1hfuvesq1GEfvaJ3TM+oPHQ==","shasum":"531783e212cd3a33b95d537d171aca73d0688d4c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.6ac6784b.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSBg/CRA9TVsSAnZWagAAMdoP/idbpG2k2TbkrTaj1uLn\nLH0jAi2dVKl5cyj4VvrFHou9kNPnbqrTaZO7Su68hsBzR+FFHPPYKuGDfreJ\nczIwkP+HZFhmuD9zyjodcF/hmTI8F/b9HYUySiX9SLfIipIp2tQAJtcAlcj3\nxh1BvA/SYUSJAXOSzF9jhubKE/KwfjM6dz7u4vcaZvehptlSVUozXhlpcShQ\nfuZOYIdqL269U+C7Rg5+smZAI8LBRVl7M31qTG1nVB3qWWZcU8jz87ayurrJ\neayzGrIgxuGUhylApdGWXQNnGMFNM1UbKjBtOKLtga6EWl33UEzlMRTMC8AG\nck01rFn3IMNJPfc1hTiee+CoGD5ObdBFL43fS5vamrCcuP3OpPSDGpms8agk\nHkYd8mZXsnslcB/Ur5tQOa+37YgRCMqemulXy9QcIpGNi6aVgw/L/ShQ7WxI\nzMkPDXEcOWjLnOy3MAmrIqdvURo4dsEweMP5Aqm7ZRl2HVm1+bzVZy35Xv7Y\nRJJnYWXNoISeRvHi3qbWkDx/smySpPgQl7baidQVsAGPcarPVNhpuKWpGyC5\nK1yZJOMHrBBMvO1YfhhX/FXuD2j8vPp3jZwq7jRrNSoard8oxRQFFYZGlX5x\nb0IVO+vd2IcIFxgDR27PvjugnEqpGMYUGW9qkkY6kG8Penpu3hrDN2jIrqkf\nIv4H\r\n=rIn9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICKTKZ7fest5aIU4fyDBySklJquiWDr4Td6b0jRi7oXFAiEAlIP7s12zxbIAHsHi+mvUDPGsvkWBOBju9rQ3yw86rMI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.6ac6784b.0_1615337534668_0.2448950692914007"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b6d92934.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b6d92934.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b6d92934.0","@material/mwc-tab":"0.21.0-canary.b6d92934.0","@material/mwc-tab-scroller":"0.21.0-canary.b6d92934.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"82c48b7f335ed9103a3bbcd062d3163b1eb661a1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/82c48b7f335ed9103a3bbcd062d3163b1eb661a1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b6d92934.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+vdbPDi/WYvGyEM3JWUTEAR3MycIDxZdXKgk9olzUhSJCtOn3Ct982TCySkYlgLrB4VmxWlfEITI+RJV2i1PNQ==","shasum":"4c29ba35b7a21f19b76531412b116fcb8356fb15","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b6d92934.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSUG/CRA9TVsSAnZWagAAqnEP/iShj2EyEKaxmBdvychn\n0nV2O6n2t5gMPWLfofizjmP3PHC4iKhjYt6Zh9/14GfUX684IZ+rgsvZzLZR\npkyuJ7wjlorNTpleEZkCYT0IqgkcJlUW2en6qOrxJ8d3Ee2vtVcgBlyussKZ\nOEZIoyEPi9UPqgp5okr/7Z5z4+5tjVrAsebOOFTeh+HKOgLOY5XVbszvbAsZ\nZpXe4tAg7y8Pn5VSs6gbgY1P5W27/Fxz7G86i3W4i4qozDXk+wBY3hVIsT6/\nP0/XcsK+Py2rWKv8zz16taQlwdS6UiCcfFWgq5jhJO9iuRyYEhpbralRhzm2\nvqrN5QPq4rTXhWLZlq+MEyvf/fe6ZPjLjldLv15Hl2fAacMH4ZtuIKxFqbp7\nusCHQDaWuGPlbfL2Z4WEP0dXC/qLyM75ZrvPBLG70WPfS7lwRoEBNmmJsOfe\nmNHHo+c1OfTtO5e5SFo+M1vVpPsmP8EGpvgiso36ryBInJlrnaOHYoP1rkLX\nT/B8LRi8ScoGUzdrl1a3XUCOOv9GxAP+2sQ9g6Hr9kXjydaJnEaiUgSzSn2B\n1lc5u11Y7dRWNI6xXEWgqSAuDMtNhz1BiE559/95nF6TeQH12IzKsIUAmpJ1\n4CU/XexADAqwch2Bw1DT7Znx8IUx0e0Yf8ACZ7TXrsxQLPD2FSZE7l3tTwPy\n0O19\r\n=RwjR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8V0jeDrDGFsRxoAKsP9Y6DSr2cc4Fm6ujDyiQnuLFTAiEA6xWwcOEnpAgI+MXs1lplSIGu6n3Rov+zSl11mlqS9JQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b6d92934.0_1615413694605_0.5240466055569226"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.99a55b9e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.99a55b9e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.99a55b9e.0","@material/mwc-tab":"0.21.0-canary.99a55b9e.0","@material/mwc-tab-scroller":"0.21.0-canary.99a55b9e.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"8b0d740e8ff12f180cf11caa9a264f3dda6542f7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8b0d740e8ff12f180cf11caa9a264f3dda6542f7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.99a55b9e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-1ac1kKn6NSmCQZrchIXFZH4WlYrKtt6qYYJz7Mmm3mcij8Xc3b6cZZ8TiYTZjRKKPtAapaKXas4Ica7yOMw8qQ==","shasum":"22fea0f93f3fc2dbe5a91f56f1b7c3ba726d0b91","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.99a55b9e.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSU2nCRA9TVsSAnZWagAAqJ8P/1Y0A5MRcue1gxrKD3FR\nuaU/VIWoI0Xbn8wwHY6NsktWFbCd+fb4oazduXD3Mf4TrG1aCki2YIjRssWR\nKN2Rk598D9qBb0LmEMHL025Eh+Tky5ZLwJe7Rw9kpcAiINH3TSJt1qgw9D8a\nI2bsvUq7onlpFTRL2n8DrqxYVLTHE2GITz6La9gFEVpnxM3q4sS2iuXHs/Xu\nmUQoXCD/WlVf1JwXNm89jx9eHE6zs0BzLqDnHdqE8FAAWoEhlw1gwHcbGW3r\n/mQHvMNN4aR9mGWr9uhk9tPwsL15+VCtBvM6O8tRsY06GnEcot9PbsjGa5c7\n2FNAyTUyNzwiostOnIbzgj00h/OdviBDjvHLCMZLkafQVSCqXbAbUIxziHVO\n3XuwImxvog4I4HlGUXvr9rf52bwQdF1QVaq+vOxtLLVG4OZ/2FVNk8BpDsUr\n4efrS6njPDkifsYOVGPhF3kNXgtHHWS7tIWwLxczZmtJxRWtQmVnJnreqfY2\nLurx6iLpGBYWwNLKYCMNIGo9SjOUnT8hvkpnpMVRWQ4MuNYEnHeHcfelu4b/\ndgabdOxbpnBGa/x6hCQB2V1I+QFHdAGJikt/iPi0W+B1PB03xImm7iIYK3c/\nym5YYQ5T8v5+mI8udOVXySYxsCl5IayXX3wOBvcBKl8uJK32WNZ/deAvlpLR\n142d\r\n=JMoi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCEwqvC5V/PrK0X8udrvCD847RpLl+csRvewZrxLfHxhAIhANsJIySZgPmwknuxdnQYq1fhZX3I18yzk8sEoiQMN7HW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.99a55b9e.0_1615416743089_0.9999460099211741"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb14efb7.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.bb14efb7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb14efb7.0","@material/mwc-tab":"0.21.0-canary.bb14efb7.0","@material/mwc-tab-scroller":"0.21.0-canary.bb14efb7.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"00644005f58173e15c7e271bc9c226535d1bbbc7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/00644005f58173e15c7e271bc9c226535d1bbbc7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.bb14efb7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rmAMOYqV9OW8Ig/eklVWgmdA84DFAXETFb1dH6FFAi3+IDtgxMwD2L86eRv0nfkIxHmAUjG40NokUZObCyMz5g==","shasum":"698c24079fe1df91c144c9f3725f557722fa9b64","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.bb14efb7.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVhRCRA9TVsSAnZWagAAyhgQAIZhS2UhAoy4NIaZP8NQ\n/f6bGHrUPeHxyaqYb+3xQWvG9kjrrVFrFSFQIAf3JgB6yN6UDgzLo1cxQSnA\ns/P9+BwU7JvaL5P+VeBmFNfCGpaPM+pesLkaDEjvIroyc3XNeQqHHzs+Wr4i\ng1BlwCq3ysKypaFSDHMzRz4scRNh3E0NkkYLwZJOuhiEG+RV0avgayPvIREe\nGHtFjkxdDndWFXHU3wlf3GI8/0RlH0DBYsYwmj4e4J4IvSsmZGbhkXVqVfvg\nsyych11IBj7VveeMH22waUHyb5bchcGITMXsRUPW4eoS296gasaZiAuJOF6N\n+dV7akpXXg3hv26NjBnrvD/qsKkpdzsFbIZHzTbGqhXp+IyNLEQftAq86A+N\n1sP9YD9zOqVNEAUf7ODgK9WtLg7VLOkvSTkuMvIyDhemCpQbaMB1owfLld95\nWGeDpROxgIFdG80S6igRX8KOrBalk1NKTDM3gLvhieCHr0tAP86ERMFTk9Pc\naOwYePdmiaa27rx2kc0aF+6JRieot54cfKRIb/u/IOMfZ5SyGOBjg7yGj/W+\nM9iYMJ6AeC5MI1QrLXDhVkKUD607BEk93BoUwpgHVPVqm6jr/3RAxkFKpgEb\n8gaks7LMxqA48qPCwdTs7FxQPflTfrGR4Ayq82JnV8Ih4nbBpKELFqcDkXdC\nASEM\r\n=V0OP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH1Z/8DFEEAqqHjUEmc/U55/BSSsFYXQzkU7TzFUIAJpAiEAmFkSy/4Ud8oAxNt4P1eV07PesJglGb4MT4cmtNZpgtY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.bb14efb7.0_1615419472696_0.5731333253859723"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ecf3bdd.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.9ecf3bdd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ecf3bdd.0","@material/mwc-tab":"0.21.0-canary.9ecf3bdd.0","@material/mwc-tab-scroller":"0.21.0-canary.9ecf3bdd.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"536269b5f421223a32dd73271ba878cee3e04ec0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/536269b5f421223a32dd73271ba878cee3e04ec0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.9ecf3bdd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-FSBhbiEs9eiq5+65FC6/qLSSHCUyTAn1WPsuTnUJHbHeSFYlV18QMIBg4fTUE8wKKwwqp33Zu4MCyYQlXSvBbw==","shasum":"7b2d19b6fd96742934822f3558ab402539d24f98","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.9ecf3bdd.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSWM8CRA9TVsSAnZWagAAfG4P/id4JviD8RUzfVwGVhhU\ny9067EV4d+SI9GPiap1p5liAv4UY1vcyTi9FVQMhBhuCqZI/0NzJGM/eZt7j\nfxQFw1KvbVbrEfQVDGyCBJJm8VL5kEXRa+xLIGjUChQ7S3Ywg22iYQ7o25dV\nstWaCUsM0vW+J+1eUyRmgoeq8Q0vYJA1w0i/RKDe0n+9t1RDizHtb42mseBk\nC0s7qRaCAcQy9vpXUGx9FJCgZ/WHokFBhRItT4nN4FuI43nzqjpNqmyIgK4D\nFRPDKVptU8TNeymX84EevunKSdTHF57lDSdgjE1Y+hjBamURqNdoSxSTuMuz\nBhMrcbJ2NQNa/S6DHRgcLrQrdsqJzMtlTsX1PrLU1tAX58xX/s6eE4ZCmd3Q\nyN1i29MVE1/678xH64NZnMMdvNkAlPQChhdz4aM0SnI6nRfEPp+hjE7o8o6u\nPZqSOwYcb3aXzbemi1I6EKH0gZOe3Ybl+r1P/eriOCRYzEdIyOpRk8DpIfxW\n72LXE/qCZoeGD8i/hbu3D4+MiFTiHtxlMJ8S9mM/9KwZO3dJ68qeNrk+0kYp\nuR7C2hrlf8xzNjfj6oMaziVNqgEEvdNr0ELWc2F+em+1pr8Uz5myLr/9ZwCp\ni8zEqc2asWaw/nFHOCJQRMY5uf8xTt3g4vN0Z2JyYfR5LqaRjC1TYAQt9mwM\ngXpM\r\n=b/6e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+1OLAym5cxM2yOAakaZv7z0VeqoweLTnqzUq5UpiQnAIgRIxaQlK0oK97FW+KLiDOeIPo88HWqul8Jqbik+ifB58="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.9ecf3bdd.0_1615422268261_0.5477293322239178"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7c0e02fd.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.7c0e02fd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7c0e02fd.0","@material/mwc-tab":"0.21.0-canary.7c0e02fd.0","@material/mwc-tab-scroller":"0.21.0-canary.7c0e02fd.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"96acba80bdfa05054613c4753b3c0211e2ac7a76","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96acba80bdfa05054613c4753b3c0211e2ac7a76/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.7c0e02fd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-z3KHay7DG3pORzFxVwr0MIKgfqQiYJV+bmLU5l7D1+c4nB1pbVlFT8+ysmq7jEqxIdKct9fjcKJKblEQvkLE5Q==","shasum":"2740b86dc29c51609635773e01921d82b35acf3c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.7c0e02fd.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXalCRA9TVsSAnZWagAAiCYP/0HMS7GLPG1QGP8wQN/b\n7gMTtGdr0yWcvuUNOywo8PI+OgqSFc3ZDRv5WjDP9cShNxt3TDJ/Htts+cmS\nhFT1yguCZq5R8tt7+1XY6tmYM89Sh22uZhiNvHwLMFTd1hCFrd3hG4G+rCNe\nAONhiLYWc5om8Koe17fsuatU6j+FvanfjtZFp8KPXFKTBr/6UFQI7e6j1Lqr\nZVN6zwxohmR+5LXMFaM/9vnprs7GjWk5LdPTHu4wZkaFgYSuJjOpr1iuqZcx\nv13PRAoWd+e6bDlhT/WBWWURY3anucylP4/hCRQD3mQE5G1+aQtvRKzJgV4Y\nlEoCn/20uCe6q/V0M4HptjEuudqYtEOmydAmnPha8BoRen0ZndBN8/9w6H6w\nUjh58Eawc1VEyWkCnEnOjPo5vFiM96QyoenUOg+kDCZCanuGP/sQZnFMSIgO\nd36ggXCCMwJK1MvYlK1azwQGtMzZnCjoNuT6+Q7QaN2k6MeXQ8Hz1kb+IgMa\nuLmX2nxOL9jFye6TDkcgEXlArOEwX9tjdfogfZhUetnDjYecqxYN0x7SeN5l\nOtyRCHZRBRkOdVP8rm56KaKdXustdlHf0AYvDcbc21c72idl8EIKvoASd2Et\n7+aoh/jvxLIWjNEQn1pM9CkbC1T9ch9XevLXfS0u0fWTjsj97UyX2KbauA7K\nWePO\r\n=rq56\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdMIAksqdZvmJCEJOOjIt/H5KOlo6a4+zW75iJlOolkAIhANrbURrHjtCmx1ltFHc6fFIxDY55yQufnn3f1QazjM7C"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.7c0e02fd.0_1615427236769_0.753491240224976"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d6d59cc.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2d6d59cc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d6d59cc.0","@material/mwc-tab":"0.21.0-canary.2d6d59cc.0","@material/mwc-tab-scroller":"0.21.0-canary.2d6d59cc.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"52ad91ef80e9719962d213826d84928a37cf809b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/52ad91ef80e9719962d213826d84928a37cf809b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2d6d59cc.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-L9KDU1pp6MOF+T6kSqac4a0hWGp71xIk4Emf/cqWwug3EK0qmszQa5bw/HM4IKYk4Y7X228LsTTQnL/9lCnI3A==","shasum":"47fd17c4317824dd049e53fe7a0ecf0289737b75","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2d6d59cc.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmG3CRA9TVsSAnZWagAAw/AP/itb4fJLYJ7SeFqW+WG/\nL72PCMt1K38ESbOEQSjo5haiEc5Tx7jUTN7tQy7Q6QyaI4ToxmMs80P0U77p\n6mtG7PhCb78Jr9MTaTMYOrtI8//lBDb+ztsj8KM5oPc4hWyIXHmPjmGDuw+w\nRH0t0jNjnxjQhmhHv22ZZ3xvLyF8nvxRAKcxYe9Iw+orikl9zCYrVuP+mBm6\nIT/ekR89MtrQ3AIQ19tehn7vYYolVbPiS5lxuws1H02VZlZb182aNH69D/bq\nwiJfma4H3dynekRrsOlvoylZud+qmYyndHD18TXms3NjaxDyMbGMIydLIMiz\nn6Q1VwzD/GGsACvakhqGQiHpz+B7r/tGuT2D3R8pEO8/qEslSf4MJ17eSH3D\n+0eKj9mFEsxgdj50hmnsmomkl5j+xkrwIUNOusHCgzoX2AbcSnZqmy9VO9Ep\ncHl/jK2peardqqHhnUAWT3LWTW7HhhqoWt4narPolUOtHsIkznuYniIM3x1o\nX0txjQ3Wyd5HHCxNmCxbtGjl7hq6xBiuK8rqy3F8acBV5teXDbYzGCI7vLSd\n83hwjI9TrvBZbcP6AkOxnLBsA/TUbSTDWKzADymVAGRLc3td5h0K+LphyejW\nxkjk7vK44zfnd663F2Nn7Km5a2fGldzX0IdkTO2ehL2YIjXi/cPoF13waAUL\nF0dp\r\n=6NUX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDOSVZr7u5kbDMZuM/sXHZ0h+Ke4RY+5LxPhTxrzvLs5QIgbjmAlk/GIBt+82eWk/kj3/sIdjrVoO56QhO/zn2k32o="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2d6d59cc.0_1615487415377_0.18361909724928394"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0138863c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0138863c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0138863c.0","@material/mwc-tab":"0.21.0-canary.0138863c.0","@material/mwc-tab-scroller":"0.21.0-canary.0138863c.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"851518435241b4315820e91765f5b26a5537c63f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/851518435241b4315820e91765f5b26a5537c63f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0138863c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-e8RyDkBfoHbxt4jnkxmCGxUcoa6v6v0qdbYgUvje0HBS3lpmbdI0lwGokCrmWwR3Mgk0h+L1zH4Ad75XfYTDEg==","shasum":"b70d88b3a7b741f2ee74394f8ee6e3c5236e37c0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0138863c.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmNsCRA9TVsSAnZWagAAhlkP/2teJIZqoj6SrCei96tp\nZK02jFlQMFRsGBTeg4D2DcpUHgVNMchqnE9oxgvdBtHv2DGpmOTw02YmaVJ6\nqs50UHiJYPsIe057F/WnZ5jHkHsF4Bj/ycIqKSLhiX8hWnELF5mxKvoekMIU\nZP7vQlP1JcPZ9lP6Qb6EWX8yFdnLbj/ejQLMOj5ku9UiJAHXKvNUs0ySNLel\ni1cRdgXJ/Rr6vWqq65BcaAUL3c3Di+w8UL/rs6EF378PKf06ivSkxLt4e5p3\ndgrKAvHJfYFht3GYcciqX1WxNhB8AGTszgw6OOT7pUbn2QCJUT42wiE3TKM6\nFjVNKtBgYwHcN+PCwbaNNxnrY4uwJjZUZn+4yYJ4AT7M2knp1UrtEqM7mwMG\nlTH7LdF85qnzt5QPa5hwBGtuAhlOXFFsCxT7IHRBePguOl0cAUsvTzBDX+ps\nVOMNLGD7si4CSmzMi648ImherrvuiLyBiIzBk9Tur4AfPLek+B5is35jHOjT\nsm3fXUjT1Fp/MEzdqk3DymmNUsSk6LS/J8sLIwM82feA6paA93tBXBM55G9d\nTDtkNjYIMIz+3V+iDoS3hWUPjAV/azH4ctFkmW/H9mObDkWKwON/Sf6P7fQ2\nYIRrAdQF5jg2UO5cgeyQ9xr0nnQyUnI7+BfxG4odgkJ9s4SOtmRyyYfHs8j6\nkkQ4\r\n=aYxN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFAly/sLmqtHpmcYcT8NitVDIZeDEhPs4bHu9BaN3RUsAiAwdLSHLDUwl/21sCh1bbjdm7R8mdOu5KqJFb4R09uMpA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0138863c.0_1615487852382_0.18527754059095258"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.926f5bad.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.926f5bad.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.926f5bad.0","@material/mwc-tab":"0.21.0-canary.926f5bad.0","@material/mwc-tab-scroller":"0.21.0-canary.926f5bad.0","@material/tab":"=11.0.0-canary.59010b6dc.0","@material/tab-bar":"=11.0.0-canary.59010b6dc.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"516a00bc24de904c4782b3d5f4f0d285b7fd1d3c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516a00bc24de904c4782b3d5f4f0d285b7fd1d3c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.926f5bad.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-yNyL7yDCYAn5AVlVR164GyFkdSOSg3xjoNWLEOjTQJjw5oRhjdf2GvkiQS82oxVm8+nU3vK48Miq5cU4gSoLqw==","shasum":"4d0ce42df8746322a6d76322c11d9c314b05f5ca","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.926f5bad.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSntICRA9TVsSAnZWagAAEgoP/1F2cyX4Y46KT0tAMVU1\nBLL7AP7z7oTQigBz+y2E0cmuuv7tltHdOQe74eByYlgt7sgZte8xFgRVtBkN\n3crgDQgvm/e+wAABc1Y6wxSWTMeFVRPtuyioU6LSCa78yaWSedfvQ/YuLymw\n3mBWymsuyC6kih7lAkYiqBd+u9hHM0GSa7abTjxhw5Mylbnq/NyL8t3NguCA\ndvZsYah3QZRwXLuMtDaEtVG4q1x5vg2hGG+83Tpng0gtbZ3YHxvpNKaf68Ro\niRcZCHl8mtQGK5/ZlmjaTpnndflQHyqOOP6A4Lk99ZhzF2DSkUsxEikBwR/8\nfo3TdSPvVbIzCVXOjC7oPk/BgJpq8jqL3upNr7wFNY0LRtpf6SXOLMSMRpRk\nQFBr9KRTGeOfxZnDRGl0MUPeAlXOWLo/VjTrLUZ8tg1Y+2lwrb3P4C0iE7tl\nuosJJkug+4vp3e7nsxix1kOfQoskXFKWzDGA95Sgye6gvdjOuEU5SUGUdHZZ\nxQ4Mc6h+hfULO9VM4bSXzxddW/nfNR74BlXl/hXvOzTc/qT4jr1JCujOW4IO\n/HUzJePCUjp8jnQoTG64QttVJ063cu5GhlFbKtPu1UbNjImNfgBLHHBqgGCB\nalL6J1XhJi9yM4OJNB65CEHHgi3b6H1c72pk5O7of25RcEQ6BlilAtKACFpA\nMvh9\r\n=MeLx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoeN8Cs634CW72yeQodbvdW/AMpxIjgzZTdljsOjVAewIhAMkVBG9qxeieX6vwE1RYG/hB4rp1TrjNa9K9QQ5s0RW/"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.926f5bad.0_1615493960338_0.9259684109932667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.520290a9.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.520290a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.520290a9.0","@material/mwc-tab":"0.21.0-canary.520290a9.0","@material/mwc-tab-scroller":"0.21.0-canary.520290a9.0","@material/tab":"=11.0.0-canary.1e0653477.0","@material/tab-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9817154a83b0101256b341e18843332e354f6c08","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9817154a83b0101256b341e18843332e354f6c08/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.520290a9.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-/AFbWMR1v+oeKlhvI2zen3fAgyQ1rTC6eruZQPbK9/AjwbpGxDapjoet70nRzXDqjQjf3rEaNd1kQYRH95YxTQ==","shasum":"02cab8a9a7940fae5c72e7ae04adb339fae8e02c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.520290a9.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpmUCRA9TVsSAnZWagAAbB0P/iOdGNTP7m1jj2+PSb4f\nLvGXskKjCNEVclquuPz/+uVG7Yq6853XQ6urwlbUe/YA8kz2h+IQl2NCQwdS\nUOb5X95MPPPTSnf4VruwI9TtGYJ2bVSPDY5iH1ILUbG4yh0ShzPCdA102ArU\n7zKPFlTv9h6VndTuZk57xTKKe+U04pcifZMULVtKXVocNhC/Qa2Ay/g+r9D5\n52Lo/nySNRUG2sbBbXMwKQoC/pNC+kVtNFjxCemk5e6NJQ4bT4Jw26JOoQ2j\ntNTPgAuj2Wj7qTlMwgpl+/rz/km0ZXrwr5Hv82MB+VtrQp9O9q1Y6cJNuLw7\nrtibiJlsgPHEMX4zP+Qd/mztLlNT3W/AE9xvMdCjU5Dd2v21rDTJcdAk4vhR\nweutu5iWw94iJ/2Ku+4jsBagMu04Y1+ZJfG4U3Xe0Bt3Ly+8Oihv22q/KUiE\nSmY+ds3Xs6AM5mZnH7hnaVe3h+UmNq2GoPJJd8qrFCRosbHaM3YQ8NvwsPvi\n4TXInTEDBN6Jgy7xqdsW9c7C4u25UKEn26E3tLwJhfFtT6ROf2XCkwOV//xn\nukMx4UccSS6fLQL1Iavm9/Yb7sN0ZME0v1z1loZveM22DA+iWxkqU+ti2+07\nz2C3FYMz7If1PtzTrQegMmKCHjtdaPqGUcNCynt6Q6da0IpsIGOvSVxyeWDI\nvXgv\r\n=W05L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDWXBPFYarXqGIxv2FrfNqjTRLyWz7OHUFuaRVxtBRXTwIgZ9h7R111DmD487NdWOMVZ6Ec6pZI66a8CfJmr/umz90="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.520290a9.0_1615501716039_0.7591310575538053"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.9ec431d1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.9ec431d1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.9ec431d1.0","@material/mwc-tab":"0.21.0-canary.9ec431d1.0","@material/mwc-tab-scroller":"0.21.0-canary.9ec431d1.0","@material/tab":"=11.0.0-canary.1e0653477.0","@material/tab-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7159bb385f7dc7e6077615de2e9bd441747fdc2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7159bb385f7dc7e6077615de2e9bd441747fdc2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.9ec431d1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-fYEPBTTK61Goac26HI9r4u7b8FBgfzY7BEt28jLTpYLfLFMBYkJ1a8Oox1rLbs9RuPNrgeEusxa3P/NqApC+cg==","shasum":"e708a6ce4983711342585e7b492640975ac21f9f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.9ec431d1.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpqiCRA9TVsSAnZWagAAprcP/jKjXGjv12nDiuS7sbxu\nhbkimhMGSdbtSSMZcoahrweEOH84AHH4mpNmMiLdl/sgd3MXkXIoIkIeYdKi\n7jSSWXdII6LkYbgLvBVkwtUPMMRjHGcT64rwVz9xN0fworXqOygC9EkPcI+U\nnPvgQHXwQs65FjZGifNLjNrGih7G48HIV9j6Wf33r/5e+ZPkcINWB3Nv22K2\nOOnpEaUeKTYshfyjk5iFYKUwz9vSK1p5oKgdmMrxS/zx+6vbIU0LonzL4wD2\nXVn/n4pIhre6WzkrKx3ZgCpRrivRk77U0yFfde+VsoFOEx0u20nwdV9NULbZ\nqzT80GJNYJp8snFUtFNWKYUoPdcJRRENOPtn4WUkLhY/WgYLnFAey3p33yNr\nzO5Jx9/V7YFdtQAWQ5HYGQPaOoJVBeugwfWMmJdOtLBiCZx4p2gFGiJaLsXC\nG1Ku5eZQsVZ3CuYVTTlwmnjyACVLvWOQyI56CPpxJcrHNV74KjhlXnV4L21N\nckg1U3I6A/bmOL+8HYCm2mHPNzEbTRYIa+mAWvphu+NrFHghFEy08cnsqhom\nQHatytdimnWxBr7WvZFyemNfNQ3r93n6wbxIM9dk8j9mcZqOXf+wfhQdb7c0\nW8bXUyEXgpF7aSzvnX8+u/sUyBgcdoHTyJj5jaXbV2QhmPxQGrcZO21xxcjc\n8FU5\r\n=s7nn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyyvT5xWX4aCX+UR/4g3zQ5EKvFWSQ7OBkqzWLRjq30QIhAKgLI5d4eMBlMVTjJVnYnYvvArCheytyK7vdsfsDD/+3"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.9ec431d1.0_1615501985993_0.5637005354214346"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4246c082.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4246c082.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4246c082.0","@material/mwc-tab":"0.21.0-canary.4246c082.0","@material/mwc-tab-scroller":"0.21.0-canary.4246c082.0","@material/tab":"=11.0.0-canary.1e0653477.0","@material/tab-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"571cad0df3b7d77ca4f17d7248d6115fb50b756b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/571cad0df3b7d77ca4f17d7248d6115fb50b756b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4246c082.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-rMymb10IgUDf5AytLs0eNtFnJ/KqyvmrZrkKR8JL0NbmLgxl+Tj4nfUo4cfeN80NXgG2OtZ2tYGzaW0uHE0bWg==","shasum":"28f584e84c6671efb9e42b7591076c8c5386e245","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4246c082.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSpxCCRA9TVsSAnZWagAAJqMP/AriiLhXsSrNtGxFtr31\nNH1QMqsOSY8e+b+HrRb72T7Z34skCiL/ElQNp8+1f+jY+lbL2yxu6LXOhEcI\nb1EuCsfG9yntEiR/yDlggWOMQGLOpiDqWa7eedL8qsqKzLvQuLuX3dsbx1ji\nkQLU3yI6HhU3jjgS7VI2pPxXnC/3PlFR+9fFM+1yzQGj7H7hA9KwQiyjYW7d\nWujg9Q7LkURi+eN+9sErZmdiPYMeHSPANLA3OPqEd6CvheSqmjFOGKQiFiZR\nqcD3/B9+bwiRBLb/UjqxRKH1C1LVMtwiAm0ZA6k4K2y357OwkhaqH/pVMFGW\ndKwqSgUjgZoh0COsf99Jt4xFpYKl6mkkCRZXnMeLfzKC7yb/o4eC/kGPJiNm\n7p0F2XFJHJmG41YFsRzW0lztKpMmJrtLfnnfYzyBlxkzHpvcH9qlonIxpI73\nDVd9b07O1UFCrt0hHWC9ElNarsp/xwUXGxpyGJtgwDebAV0e/X3dQytLQcao\nm6gMO65atD7zehzdIr0xAycZjVFgovJ2CEWKJ97iIGGW6VTMHpjSCSPFTaK4\nXUMGQU7Myq11J0gpnQMpKXA/+vwGS685b5I48yG8wT9i9so83j6DwqSQk346\nOO2EsY2Hy1n6k6Bj4tc0h/ejl76LWjwWsY9Wv+B2f2LMUOjKAMfePfraOI/e\n5IPt\r\n=1Ow7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAYamajqgLNu3QFac14rNBqqjFjX38oOJOgjJcO4aqjZAiEA2IC8z/b9CGI0YH9DejqZ3UU3HvI9UOsu+1XLGYSUa3g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4246c082.0_1615502402245_0.018677841821580055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.2d736253.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.2d736253.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.2d736253.0","@material/mwc-tab":"0.21.0-canary.2d736253.0","@material/mwc-tab-scroller":"0.21.0-canary.2d736253.0","@material/tab":"=11.0.0-canary.1e0653477.0","@material/tab-bar":"=11.0.0-canary.1e0653477.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4d8c53039218a8da7cc5199162317802bf01f7a6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d8c53039218a8da7cc5199162317802bf01f7a6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.2d736253.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dBveM6IgwPzKXpyCrnNfaqNsEIzuof92FcSYTFshCuHXcIxmpKXV9TzZhs/frVWlr6kZfID0CbaI+vFF8yS74g==","shasum":"71b59c548cbda729387bcefe825c8f268a803f1a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.2d736253.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT+FwCRA9TVsSAnZWagAAgBgP/0I8v0Gpj3gWCa5rUbPV\nKP56wiWuKKvlaL18rvugbNtiWD8P05sPUfSYblmrFeiajqLd0ws/F51nI1Bs\ne20l45RYpTW6foXkFo3GRLPJSvH6j64mpT048DAsfusP0usje34zSGfw/fIb\nOEdG14+o75e6VfX6Tx46hlAl/ADRk+izFAp7Zz+XZO7BkOc++MkExYuE0MsR\nG0S9UdNufKwor0iiQkcLyZmnqp8e/GQtRFrkdyGH8a7E8G5tdE942ZDXl/Bz\nbDXO2lcSXQZYDHUm8NtxUp+xpx4TncoGyPXfinmWDzuRWVmdiElxCP7c2kPS\nqEvdvKg0E2s4KhlcFta3zHJDQCg98qRcQvHIKS0iavjcveGJ8eqt25QVdGXE\nplWr2Z8QDIuLtgIOmCMJEf74X6eHQytkedEuXVKLGDKfXSusyeAirNF3exM1\nEC43OEGZsp2i80PdPHnG+eBngs1IiKaTCrzACj2qt7TFXCDU3IMvLGmif7ih\nWFStiKyFMYz3Rm75i6/MX2oC5LgkzHN9UJOYH/qU8CRfMs5B14AJunFb6qA6\ngMm/xabiq7UyuREt6A36jGM4vqY6lxMKcoO90MTrjTg0p+fwLKNacowkSiPY\nhWjZjsAjoBd8doow/7D//4VPUel5NUv5kmJtzqMULd/LxJuUmwEggrdcd7FJ\nc7Ik\r\n=LrWj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC6cpMempFR7qxPeZnZ4+64w70srg+pSoLZnTmF6dnt7AiBe/b6ACBAeQb1TSjqDkt63CEVRleZgtjpAh7+SG/+3ng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.2d736253.0_1615847791834_0.7295011143122996"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7033124d.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.7033124d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7033124d.0","@material/mwc-tab":"0.21.0-canary.7033124d.0","@material/mwc-tab-scroller":"0.21.0-canary.7033124d.0","@material/tab":"=11.0.0-canary.73a227194.0","@material/tab-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7797af96dedeb3641f0889f0ae67bc02a1ff2332","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7797af96dedeb3641f0889f0ae67bc02a1ff2332/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.7033124d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2+KS5dN0yNEviR1G4lofqGF/m0M1YM+xJDHYgPawbW8w/hlcC8QYdRCN4sLRuwUI4wM4Urliz4xbnYXNm6VLwQ==","shasum":"310fd9549cf73eda489a4c05cc92a858817c78fe","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.7033124d.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPscCRA9TVsSAnZWagAAsFkP/1T3YscwZPNbIeemv/GS\n32CPq2BdNacerdWL4JU8rXNvI41hOCadCjEhXlJKH9fOx7Ky0DBk+OFcwl6j\n+RA2azr5hBNPdAPfbbOu7xZRMUBHjuUfEPAR9gvDs0dox0l8Y3/6nsQBko0S\nzNKZsGzBU0ONO/hUGITllVUlW3iXLkP7M0n5o5m9gM7t0HHZuUO+ylxEg2AV\nWTXH4oe4RM+rnkvyUJ9T0EZfDS0wrOSKgsCkpXrwPA5FQfnuyfIFh01attjv\npS8faQAaPUdYzSM62UsKko2kg9zlMFVbhWtjJhr8rYMMI3UfQjBFqbBc4E4D\n+f91dE87oY30kZVJtkyIivGhsMG4gUTlLyDVMwj4hfz72hzLF1dW6mc84h5t\np8nReSBPkoB6z/M7Uo21yT9Q4EZRMFNLhRoGhggoUX7NYWLTdZNZjxJCxQ7D\nVEstM3EduIPCI/Or4xLdyiYTeRAg+gV2+a2Wk6k1faBZ8FP4s9Q4vsWhEm/J\n6IK/1tDxKVz81oNnbBVbUd03MNAvHRH7NH5tyP/Nz56rndEkevAjUc7As5X7\nN4xAyIsJtNwfSeF/0iqPk2XpoqmTTu5+V3WamYe1KPuRsXGw+MnrDUhzxrdl\n5dqwvtZWkUK2QnbGUXzIs4XQ0Uh+lQsbeEqlCOctDVa7D4E9f224HpUESAlf\n/wLE\r\n=EECp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID1HioOwINy1VFFlDjE/1c9hixl76cx40NES1d6tnCWLAiBcXfByjIQuop4OGZyq2zLYxKngEiSV3LAoToC492xk4A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.7033124d.0_1615919899865_0.9725497584845071"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.6c0ee901.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.6c0ee901.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.6c0ee901.0","@material/mwc-tab":"0.21.0-canary.6c0ee901.0","@material/mwc-tab-scroller":"0.21.0-canary.6c0ee901.0","@material/tab":"=11.0.0-canary.73a227194.0","@material/tab-bar":"=11.0.0-canary.73a227194.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d7894da96b1452ae771bb3096b993e3f51ce8adc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d7894da96b1452ae771bb3096b993e3f51ce8adc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.6c0ee901.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Q4AP/9o6xF5Ch+E/z8XSq8VmfFBX0ozsXasNEm2vRdW993QyiPGhjUqoVY9LJDELB0sze7+NzvnQkA7S4JO5fg==","shasum":"fc84be8cf8f83b19398ac1d5428f76de5a4867c6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.6c0ee901.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTOvCRA9TVsSAnZWagAAWLgQAIOY+AHv9Wsr/Rk6oDMo\nU9U7XWaehD0h1JN3LWdYhfYW8soQ4QXsTTEfihWpnc3Ty9JRpYaH1RKuqYzB\nSeKVJX95YapEAPGGt+UobzRtLsH7f3AoL2BccbbhuuaKDp2yfDVBDwhZT0BY\nQB+s8+YcRWfJPMtgYJSuJuePExbRFWbmoXO+6OpPIuGVHph79FuiWVtUiQ2N\nPJd0axmGZA7fpHeB+CS+0BFFER+OXKDjrYxVtwMxu/TbKWNvVBXftVPvJsXZ\nl+VSV5YiDRO8Q80Ji3X3X1+lysTQdpT2mtIA3JZ0yE4WGBDL2A2syN8TLrKy\nCnGXDHiglF8DT3U0zS/ru/EbdbS+18f1ON5fkDyEBmACVr2cKZ3RAOjY5uPY\nzBjFbQbiRRmwSgYR3eA5zJMPANrAGgUsc+bF4oHiZQ9v6KubrMAicpMtBW4o\nduULLRaA7fzvm3Q8MoY6vqc+oW2AJAWGp19u59Efu3fqDmdt0+EKwcNx5Bxd\nmzaq7hKcefRwYm6BNwzxGfvaJ7OcRh3Fq+jjF04/HO8cVFBzCHZJR1gVyUu6\nLlM8IObDLHdNIea8TKKYtC4xuQxG6JcpepD4TeVh8Ciqq0fPOz0r9QA5gPHX\njlkxUvO+9iW9mnu8ybjfAFL1D/euzeYOaEHzY0muUz+r8dOMiymVUgRLZb8t\n7Xzc\r\n=0N1b\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD4qq5FZM1uwouw7etCsddjDbUlbozsg4G+BcvZYTEyKgIgVzFxO03bhMkX6GHFrqadQ8WRXHwWSyzY3hMQYFj2cPU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.6c0ee901.0_1615934382925_0.5018269061628569"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.7f0d605e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.7f0d605e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.7f0d605e.0","@material/mwc-tab":"0.21.0-canary.7f0d605e.0","@material/mwc-tab-scroller":"0.21.0-canary.7f0d605e.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","@material/tab-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"77ccd00da9f68d22de2494a2aa4f35b0da375669","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/77ccd00da9f68d22de2494a2aa4f35b0da375669/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.7f0d605e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-OWId2eN9fCgR1/ZYYyrybAZoDPNR/wMZKcf9pslyTiQ5G8WRj6DkvOIcO5OyUGMhFainM0YvbnDdGQYYlG2i9g==","shasum":"7b9d1f0ce77872491c50af785e68f491481805f1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.7f0d605e.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUkTjCRA9TVsSAnZWagAAQzIP+wRKErKDQEBDs78ioqMx\nwMeBlyHeHsCKpX0FyebkdmE7tDYMVObiwb4nhbaaR14xkN8Z3ja3hPa5IEhx\ndYzs1Z4uYaLeopV7I3FwF1sHgP0pPxMTxkpcKDl82h/PVRK/LrF98FGu+0Q0\nN5mzV8wN+eTctByL71TXDT5z8+O5Ow/0ejy52NSvt7tpRRQ5oJC2MkThRSXG\nRQpvWRGQPsmrkzkFk0QLnYyMPXZoxf1x32PYAcJF7oKz62pthOPVQyZT5HBT\nD0VoPHRGRxdP94YrdYaCxFYVxg/SaoXPbxnN8C4a9JDmosxHiUSFVxdqgfQ3\nsbUWxB9th9ocLXuUsB51l9m7seG+bgnrZ9IieAmK2yOx76uV9ZyKakFvOpfY\n3TTqBG3viI6M80V8LT0J/HF/ui1rsC3GKzDcKJjda9MrZPSftV1VOmer3ew4\n0AlATW2NY0nqQHC4AWJeIiOnC4Da79MZxIslKufmDX2Ebv6v+UU753aF3ukD\nyGErXF18lLrv+sT8m1s5KpZXpGaIGkygzVhukEM1xG7Wv2XF2bz2LcbBEph1\nS8tY9D2/NJFeVJIP4h15g/JBooss6NtXNyRHwYQSjsiVCa3WEZWRTyDIU1DB\nqeKMGQ6VmOf/e4BiJGyNNaIxnzFdRLbDypoTo3rin/XSv4NMYxfcclXcmB/P\nHI6e\r\n=UlEC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmeBIdah4BYwqRYmKVVDaYPTbMf6AuxMfjky4fONNR4AiEA0A7HXCEXNGLTytN4PQQh8OYwuTWRUjbh1ODY9Ip/1kA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.7f0d605e.0_1616004323515_0.9044592825929585"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.572107b5.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.572107b5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.572107b5.0","@material/mwc-tab":"0.21.0-canary.572107b5.0","@material/mwc-tab-scroller":"0.21.0-canary.572107b5.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","@material/tab-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"9399ecfdfc3b2f0153e16b3970555c1351c9ea81","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9399ecfdfc3b2f0153e16b3970555c1351c9ea81/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.572107b5.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-dCBdGqATf0yXFOCDfKHuIsKBWPSXXjjPRLt9vydyy76LuvEd8iaqP7jbeQD+1bTGHy+ROcNlMGRxxCNDEzd0oQ==","shasum":"5459d4fd533633a5b70107248647183a7e736048","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.572107b5.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+hNCRA9TVsSAnZWagAAbscP/1voiAxoiWiufBJncc3c\nCgJ2AtKE4z+CLZfTz5GrG/innUR6kXyCrhTcTremmr7QBeiNgvDlX7/HQ5de\ntBTfqzggS9ECzRQzyGRfSI6WuTGcR1pPT89CmSAtC5lDTU6CiIJ00v21bB4q\nSKsjpg0QSLvl4cfJUaa9skBofxPiTqvAfVyPJwiL7EhDCFcK0vavqkkC06tM\n5xsFbfLSG4FKk0Op7MSOpm+AodVDmcGNpcb4MEXy7J5Ywr+uDgCM7nnCAWLs\nHXMs6/RbYU53qtERnkHFkBMX3N/wbUA5bzj9rpYTA1SlpY6RntBP4quN1sz4\nG2ivS2o7NGVoeqwgaMv6ED+tKbhm0bHzw8XqJ7GinevyX4Xb+L8m9OFe9Kvy\n/9UHF8De4T/UwYJGAoJoc2mpT/tJtW4mE0scuo1xHdheplN9vs/knl/5ZF6i\n9lkpMDSlng9zdA+9Lcz9F+u3sjDgPYcC4LAKC75BlRb8BzkaO1DtxUtJMghP\nUlX+mkdQ6aFFuUlIlo+dEzIMEd+bv3P9hknGkOp5G2I4LQxJ/cu8C/FjaRlQ\nptojr+i/j82arpmn/fyMmifHtS0msf3j1FkTbYI5gIlX88SOz/yI3dbMgc2v\nwI+CaADo8Q7LUYMTxjLrOE3EQCEVVN/L9HprTNQNPHpyOvNWHOmhAyHr6a5v\nZH5y\r\n=CtGX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzSUfT3ttBeU7l/0d6mUt7fdEja0yJKUGuf0mgijPlVAIhALzXI45u51LnxWZiqkVqET6BfE+hs/EKyiraGQVaUlDv"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.572107b5.0_1616111693137_0.16328800477473582"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b7b220b1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b7b220b1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b7b220b1.0","@material/mwc-tab":"0.21.0-canary.b7b220b1.0","@material/mwc-tab-scroller":"0.21.0-canary.b7b220b1.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","@material/tab-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"23f87dc3afa9f7b0599f9673a9f27f15d9751f3a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/23f87dc3afa9f7b0599f9673a9f27f15d9751f3a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b7b220b1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-+MjOLhXEfjT6vCIX2TjFrmza4MA0ue24+zN1QCZ7rK8AfWvG+OVafA/V3lIP/yi8P4A7yFta3w0Ny8cb8vOyTA==","shasum":"926857c5a861971f19934e834f7ba80f097b55dd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b7b220b1.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU+5cCRA9TVsSAnZWagAAHmcP+QBeoZ+lcw2OTVLEmTVs\nMKZ95aOTJpSzQuE7BqD4F5ndj2Lq751XWfIkqjn22kBPSNLf3P1ZhcvEMFKT\nnB0KnZ7ISwLJA2jztvsxGV7xvjIz/CRWr9j3aZEtBcPlfHfJxhpj0tZZT1cO\ngY/e6SzKEE8rnUePjyWeZj6wkZotSD2nMYSjGbeNYCnIbz/mQpWT7Kfc0xjw\nXs8vLpbXo9IV/QsF3SOusD2zlsILn9iJgLD8e6YNy3/ld6ntB4sAhjPAJXkY\nxWlaWZfDripg1SMsCtWmg4XqQT0fnrgUoAS/l9lHo5hswb8LqKFXnq4JMpa1\nCY9JVWYigrRVDLZaHdTSKbP/OqbaP0WP4cFGIqPl/3O+FTS2Yh0nCxEW99ve\nuX9j7+/HkelWwqgQN68/KLKm0QRzYjDvJ+01bXV2HaVK0yFnb3gMs6oJ9Nz2\n8u8hMk1AY9jkEC2maHV4JXzDA+JWjt1mfm2kVVGy0XfGYhDgycfZ6Br0KRVi\nYX+kNGh+Ki5UbHtO//9iyEUbDLFVydXyhbcXlSM5tTXQkwwG6PTwxtnxGsoZ\n3Mw0bITxc+/m/qwxq+vilDkIcaUPf82tUrIF+o612Vw+b5NmFcaMAwCIs7o1\nhF4PJ9Zp2Xu0/7OCfDf4AZJrzA02i2IU80j5rpZRu5azN5sY7OFbg68fG/Cd\n6oGn\r\n=vIyG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCS3kQMuckiXd5oDpbf/r404uMUmvTgHoKzT4v6k3pRAiEA9ftETtqDgk1WA5gi1zDlpkWsQ6kiJ4MtHfFsWGDpn/8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b7b220b1.0_1616113243978_0.5618373668140018"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.233b2de7.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.233b2de7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.233b2de7.0","@material/mwc-tab":"0.21.0-canary.233b2de7.0","@material/mwc-tab-scroller":"0.21.0-canary.233b2de7.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","@material/tab-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6887e9dd977fe57d5199416b097952ea056e78c6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6887e9dd977fe57d5199416b097952ea056e78c6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.233b2de7.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-4h7WcA7KZAwO4LPbXrZcGHVjMHD2JuQObjCbvlNx8PVlJGdx5RgnfbimQx9dHLzqBjJlEIqaugxK5RB+XB7j0A==","shasum":"3ee71b0867cf3d6e677e823ff50761d70f8933bb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.233b2de7.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO3OCRA9TVsSAnZWagAAZ1IP/jABUeLUP1mnX4zg7qH9\nRJyw0emBQ82qlEh9JLLtuwDIwa+cup+7/avvKsPvdYL0dyf/VhPgvnuaZzpi\nUZd86vmzJo3XybmkhaWdeEWuvT2veyq0r5pX7ISYE68rEt56C5gw3oDpvU2o\nsVE88lolqdmyYqzF3MFmaR7iFNhjQ2pqzAn+ENv9Zb6UaFgxBdY5Lb3RkcJY\nLJhlSLW0riAgKJ/tamwniZQE1T2B3SVm4unW7Id74si1/ki6VYVH4w7V8Qsr\nYO71PCXvCKLRIDIt7NwL8c2NWCGCleKX1pfgf01YVnawdBZkQdJZGeUBHc1U\n18UWV8dY83Ov24OJAVSTPZiI2vauGXO3yw0mYpgOz4nVyxVZOW0it1owrVuQ\nKC8d2vWkMX1ZzY87StcFGpW73NivQCUC2Uepfd4mrHODL3ln5tsKPNftRmw9\nXRPgfeHpA+HdaTEtbiwvjLqXFxX181O1D8X38MmsDzLjP6aI94QFxPgJHcjr\nfHOq0uflAYmCOHYITiK6RApri+iSKVNjVSlP0j01pk06dTqk396Fyv4I6ik/\nH3e/r3Xn7herzxhxnn27O5N56p8V4heki8XwrqPQbt4t96rLJz0PkYLu77P5\noDlesRz8ks1SEbtnnnjG/re+hFtFxVBpCmx0Os0Srqzv5f9zWag53eFODzQT\nViIr\r\n=IOQI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZh/V4oqL3VCabGCVl+ol3tjHyAnXXXBdZaQsbg2ACAAiEAhFB0KW5NiIj1TvCQM8TfmhisprXEGB1SXcS6o/qGtq0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.233b2de7.0_1616178637702_0.5756523905039481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0c1a2d97.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0c1a2d97.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0c1a2d97.0","@material/mwc-tab":"0.21.0-canary.0c1a2d97.0","@material/mwc-tab-scroller":"0.21.0-canary.0c1a2d97.0","@material/tab":"=11.0.0-canary.941ca3b3c.0","@material/tab-bar":"=11.0.0-canary.941ca3b3c.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d341fb857369610d763723d28d8c9955cc461de4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d341fb857369610d763723d28d8c9955cc461de4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0c1a2d97.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-Moh/vdIlE0XLLfpty64Qs8N1b9GmOtNi5bVNnY+s9wlud/IU6iw6XQ/oPL6BKSpVIHuZwnn++8aDHpD5Qt2bug==","shasum":"ddeeb727f7aab63a83f807c9ee3b9e25cc14c80f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0c1a2d97.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVRX6CRA9TVsSAnZWagAASvIQAJ24yP+XCnbMZuZ4mNYe\n/xJCakNiMBKvQ4ahiay9sSUKrMLyskWyThqYb6KWDNjyH7hZrS3JmGUR4v29\nQtJMp1hFEz2p6lnbSQoExUzhjEcNLU2HauDAM7YZduI/pM6RkY9TP3GVLgum\nZtwyFjNgaU3V8EjJLWgzNqAZ9sP7GWiOyoEMYcnWY+JJ4LUbWvZb7uViRjRJ\nYLtMjW+l1gzFxePzOhL186M148XK9zSRiUd2KTbJZLoZKvcqvaE1wVQD/i0V\na6dzH2iC1PZU/ewQOzBFdHPYBHB/C1UwSDtfh2m8F3epJk9l8kbI1NB+WDlP\nUi33C0+RvglGRMkTLoI/lWNAOFf90V+ELElobBQiXxyDoXdV+Pg9O7g6v2tx\noeXbo8cWIKwyFiij+r6NLDsEgJglA2MPZZivRMTgpNZx153eN/WRDqz0nDET\nY3VtiOtDJkby2DTdbkTSXRlI67cvvRhiVC+x5B3bhDGL/IwGqPL9EDVk1cyI\nesqOTF2PoQgR4/2HnoxV8bA/KcBFQzM7ZXSwQ6/8q1BtQjORM9W7uQ2Iu1dr\nwvHASCJsKUcNjGMsEutIEVkaX2vQnJ/jgC3/uZpFY8xr2DP2GxOO5Oc8b5pF\nieCpCSj/lR8ORLdIbF8hCx0YYHZi6PoIqcK14YMGV8M7vI71bcrfOU3rubQ3\nmcEI\r\n=Qz8M\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEyLyoYY8WR39Xalb0uyQT3l2VxTqrDGwWETomh5yQRfAiAvU4NNmiLGDD85wZovMMZWr1ACSgFDOeGLJIz7rtLSTQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0c1a2d97.0_1616188922324_0.835296613072184"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.57ca2e73.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.57ca2e73.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.57ca2e73.0","@material/mwc-tab":"0.21.0-canary.57ca2e73.0","@material/mwc-tab-scroller":"0.21.0-canary.57ca2e73.0","@material/tab":"=11.0.0-canary.5f0fc444a.0","@material/tab-bar":"=11.0.0-canary.5f0fc444a.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"aa86345a10da02c5166fca78e72e367ebeb95677","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aa86345a10da02c5166fca78e72e367ebeb95677/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.57ca2e73.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-os61toMSSH8oiUQ2jXAsF/iF557g/Km+WiHIorIO2HzGZEQZ3NybeZ9FiuexK50NPYR6R2HbBpsdopuKrkAYXQ==","shasum":"7d56620c9f30963009dd5ca32a445194a5379c0c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.57ca2e73.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVSicCRA9TVsSAnZWagAA7b4P/RKnbt+m74lhpGQ/nqAr\nIBStj+CEVg53x/0Krv+walRWm0gzFyLbKehW8zk9EIaO3+M+VxT7viRG9mBp\ni3aNUIA4BFu1FnH0Clih84V/yLUpBfDQcq8lWDsfkG8XMB0OSL4r1iztjby3\nlsDkU52m3f82t7EsWkHpXf8bWHAbyF9hBUxbRapTeIOiYcmUnbGo1SaJY8M0\nqIDPNm8d9s/pqKeG5IvjkjbrCBjq9qr71vbclT5TghCZGwBEuGj0GTfwKvSl\nmv4QY/Vi8HK7PHyWFjEcxONp85NHDFHOAur8D/jRV8TMscjTui5g3yugYQ52\nHQnXyY8e0AM6c/pMk/Vzrs0+sx0mj3L/MwQI9RVjKA47tYNNENKrGVE4oASh\nyObyGXlpVGGIgbkNek+EPWzEEQXGCU8jbLT5g+6/uNla/P5mJlXwVYmwlmIL\n5h7mR4bFm50xgrliJuZ7FcckAmCO/VzfZOS0xgUnIlBg5pf7at7+TAz1mjLA\n2Z3NZtnVdtnx0dk+92Vb9XsZKmcaGcX4OEzdya+q5YRDFJwcd2GKBYQ11Pb9\n1KbblqEI7yR/LN4ggyXYCRMUbeVufz2wLLrTz2TfpeLLQj85UkUx6rMEO6h1\nPgCBUDCJ7Q+Jkf+6nqnDvcTA/QBcmTL465oYAhNUiVWl9f6qcI+BGtHhAWeL\nvSQG\r\n=D9TY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC48row4wAsBbp+vpd/1Lo3gM89bVomPBzpP0xYCgDUoAIgCvfHn8uNlK7MDwyu7fSTefVDvnnkWIzqZwAxNTnQafs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.57ca2e73.0_1616193691706_0.8425213229060444"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5c058f4b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5c058f4b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5c058f4b.0","@material/mwc-tab":"0.21.0-canary.5c058f4b.0","@material/mwc-tab-scroller":"0.21.0-canary.5c058f4b.0","@material/tab":"=11.0.0-canary.8943b991f.0","@material/tab-bar":"=11.0.0-canary.8943b991f.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6a50e9efec728fe20024c0ac52645387b1485f08","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6a50e9efec728fe20024c0ac52645387b1485f08/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5c058f4b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-R9eg2A/7cL8ktxQktlRGp7/XttXkwJINMUeAmkbvLj2f3mhgxI6wMMTYAZm/RnXFJLqpzZGkcpG+oCyWGDcF0Q==","shasum":"3dd51203e3768c083f61f03ce7b126c4de70632d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5c058f4b.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWnUYCRA9TVsSAnZWagAAMc8P/2ja3Tra3aqmQnBEsyEF\nJ3kOKW/DTRssTUmBfP6umDReWTRP8zJpWnZwb4NIFcv4W596Sbax3YmkDiyy\nsQd/qrKRxBMVYHw7blRBIPawyR8LXRmpwznB7Ks5mksDcJA7Peb/CO7QuGL0\n7Xy7GMIFDoj+S1nBN1VS1kOQgp/fsgnOWc+zhB9c3AeNd5MAo0h2cTgh5H8G\nIk9SUbfOoUXUt4FhXOKU6vW8CUoVA6dYNrHCxivUD+SlGIlfgX4Un82y8Kv1\nay2HNbJfVLI28IbAaN4cAjUkvduyZU0cJvjvcOSP8ogfnQMGY9ZQ0k0EmUS9\neX3OcYEMm6zwhXn2d3bss5fH9pdvn0cGfmOwPHY3VKXJr+u1hUnDmqDMB9Yu\n9I/Hsrf6GvIHDDIREeS/rvjigUXCzS7VHatZsS134KNo2adGxFhcxT+y4tY4\n/nLDkLu3T8WVwaJmwS+5sTK2kpD673bNTJTNNNgvmwDDkWqaBxF5oExlXz92\nRTMp9Vy5nxJiJBP9E/ZYd5DDyrB8QMeVnXmDvWsEC2E0y2NIcjm6cVz7c0K/\nYB8g0nvBHn/ycyt3eThWq+yKYvwdBK9+ptbJvpHifwsCCpanxB5YfriGxdGp\ncbpqGcLksVZaEoDgbCc1BMkmqd+/gIfy/L6VaqX6I9CpUfRuo7f5qm31ur7k\nIiuG\r\n=suID\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCakApA+RduHkRacCMuxFB6mXDIJzAMohz1rzxWO1pa4AIga6BqxwZYJQNlt076tP0jE7dZVRHHEK2VGKwNxV2Q/Xk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5c058f4b.0_1616540952216_0.44435222096083193"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e27ef7cd.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.e27ef7cd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e27ef7cd.0","@material/mwc-tab":"0.21.0-canary.e27ef7cd.0","@material/mwc-tab-scroller":"0.21.0-canary.e27ef7cd.0","@material/tab":"=11.0.0-canary.dc9c84023.0","@material/tab-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7631d1b220323112ce72141784e75c8356ca0f88","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7631d1b220323112ce72141784e75c8356ca0f88/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.e27ef7cd.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-j5e6BAVHjnGWggPlfekFl4WdDi7FW/4zqcNQZjjwgviNCdjkv6swSmwwvBpdfiNQwyVyLHsbB19+TwLczVBK5w==","shasum":"f4ba5282e7895d7d6130a28249433e2a37eb4ab8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.e27ef7cd.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY4YSCRA9TVsSAnZWagAAu2IP/RsUpFIOaDFDZac6+Huh\n824x6JHV8h309PGsWA53nD01Ghle7ymDLtJEcdgQdal8V7YUu55DQnYyoMxk\nAYSPFeRDxexp9eXL3ANubHiFM2gv+JOznesnpsIXq3JhWzSAYN0Qt91zrbdz\nm22HP3tM3i/8kW1CkBU4WVQgbOmKKVjsI7sj8+w3tTBvGUk8n9c7XOF2i6IV\noPsQH6O3tlY2vukwDtGg7LDM1x5weUiDxH7eo0XW8pqUSYH35XZHnP51ClXi\nYVbP4AYquYvhqbpXotBJEg8ch+t8o5dYv09d6rl2wkt+VfXTh5PWoTZkJuqA\nziEn4T780SLpoRi8Pipg9ol9GLH8i3sTjfMTPM7YHz3y7v5y0ABYrvv3uEV6\n56UxQCbGM/pgIzeRjZwkElaClKIT++wMfnxHS0qagDsAvGI1z3ZQDfxFXHsq\nsEE5HYbvnVtxOJAav86HhuufWnI+bHj1rBovEHcnFgYe6zi9MMJSSBypYGbY\n/jKakTUQ/lZ7JihetDja6AFHr1c+IUzcxs570cpLT6CodwLI/WwwJIUiQeQX\nJNv664CmI+mPND1QEgcxNxPeKowTjiOTHQQ78hG74V+nEeeCUgetQbi4R2vR\nePs38RaBaeawNsfOMpnpJnYFN4mcXUgPHfQppOW8UE+ejG331AhDs2m6n/rH\nT3JU\r\n=9FnX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCl17wo5CvB6iJOgcVhAsfeY08ozeZJT3bA0ZWw9rZ9PAIgc/6Z/Nu4r+2HGuC7hjYtxXGFk8W7sdFjKAFaeUfgqls="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.e27ef7cd.0_1617135121601_0.6267804028109301"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.15c09e74.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.15c09e74.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.15c09e74.0","@material/mwc-tab":"0.21.0-canary.15c09e74.0","@material/mwc-tab-scroller":"0.21.0-canary.15c09e74.0","@material/tab":"=11.0.0-canary.dc9c84023.0","@material/tab-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"6f3ebc4bb5f04f139f9cc24061e00f418b04ae88","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6f3ebc4bb5f04f139f9cc24061e00f418b04ae88/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.15c09e74.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-zXV579ZS2uKGcMQmkopobMlDXbob4Mpod2vUjRRjLep+5OHR3jU+YGBcCfBwhGi/kKxNHfjUs0Q+xsA73SYPmw==","shasum":"fb1c85a34c86e4b72b3c93d3e1e81fb3cfa5db11","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.15c09e74.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZKfXCRA9TVsSAnZWagAAeV4P/2ljyEPAUSBUYrPmVQMr\n0r24g48XzOcAOIVLTTYu9zAAUDuMnvBuwEkIYwscFWBZmS/sQ1x8n1d5Anp3\nXTLYq4NZuP0Kp/GLya6/HW86Hj2KYPcs2z/5oMAJdnrcdnIsuTGS0WG3tbje\nD8e7cZ2eLqZceuYlXLjHWy7wxnWYW9DO++W+H2PQxSJLHULZuBnLmqzlB/j+\nyI2Gnx2eJ73Id+Rkj6NIvyQxaJETyufSuJ61Hos97WAritazm0fTdZNWPsIe\nBsNF03LudlkBUFw4JZq6OKBYDwEJC/EWtjW6ORqbDIrmgcKRnzpvacNAA19O\ntypcBzRibyU67ru8Qw2RpCQ1fxevmaF49h9poRcUvwOoCAFj4fvLOL68eHxF\nC7IkXUo6mNbSgGaN7FSoBDFc4VxYQFx8dCfYpemjHp/ZFTNvO8Su7NXaV1Gk\nfojmcN/tZOHyOFQYCd8+/IuOYontH5mubZPaj4NLWSdxY6CRYpCYm/hYeXk8\nP8p2fYpJVl7WdXznQaTf5eya37UcPprFAe0SNLTCIbiZPxzDL00a3jAvL6eM\nmlE/JhiSAMdpzxkDzFlREX1EULCgVIlMW3NyfGoTQ88wUYd1ShBVaJ/qbRe4\n8rDDZL7eKuuDaJXIRRu9Rz5RkzFjj7CFyydWT5LIjrAfwdl/OqdHMnW2IkcW\ny+4Q\r\n=bchQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHjM+9lkyJ+UrEU18Q7LleE2y8YV1aEY21oeWiGRLSrsAiEAxNFdVdZ5upTeUSV+++DvEcnwy4lve4NMXEBQ1T1v8Qk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.15c09e74.0_1617209303366_0.37555356155469344"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4dc32be3.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4dc32be3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4dc32be3.0","@material/mwc-tab":"0.21.0-canary.4dc32be3.0","@material/mwc-tab-scroller":"0.21.0-canary.4dc32be3.0","@material/tab":"=11.0.0-canary.dc9c84023.0","@material/tab-bar":"=11.0.0-canary.dc9c84023.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1f71c032815f456f2ddbee58c9b175e65da3c18a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1f71c032815f456f2ddbee58c9b175e65da3c18a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4dc32be3.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-f+NY4pwcZa9YTQK68JX1EUFIVvshbLuDMdmM2k6hE7pCxuo0eE0XW0EaNNPiYqbArjfIzlGDjvEySgy4/mzn/Q==","shasum":"44e4a974b79b652e4e900f10aef0546b5b27f484","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4dc32be3.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZQpkCRA9TVsSAnZWagAACS4QAJASSFu3n9uKhAdOlBHl\nQR1jwBJD3ySa8PonOC5jgZaIh5FP5b+PIX1cRdA8xMy1AA8wcT5ZgdVKvynl\nPyvevsMQ7mx+e1ECDd1lgSRUzFuV23jb3/wUs7/C2GXTRxuW+2SQdiWig/xv\nCo2wgTW8kd9IOTq2Tw7D0vopIA1GVkW7itedX13ohxKhunTiq74sC5/+jI+y\n7vyV1BT9WjNSVh7+terBJpow9IjXKXL+isHegIDT78iGkGxTdiKp+keapSyV\nS917f6650w5kKxu6HMF4O2PX5f4xqUd82ermn7xNp/C1FFYoQVsPqcezX+na\n1wv+yZnvlDDJPOBgUFrgGt5um4Nqo4GBCFiunOJIxgxKximUtsjd4qHEG2hI\nib1miX/MJ22KpgtbTuNf8v3wRc5yuL0jxPAW9WVDW2K/2ytfa6i/iNKlpAiO\nxE8OJqBRCXJqsxIAi69GPH9eMPy+4IbLa1nB9k2JNv3Nj/K0LP88umWSSW32\nYmK/MQfBte5Ao4+fi/NklfNTU0BZwYKfMmaBym+C63k/rcD9o8Vbjvuzbaqc\nQoIq2FNxvyBGn+M+t66dAtQ72YBpXqRSHdlzzYUQIsB2HMFFrd1igEAaydNa\nlyjDD8sijUZbOsFry4lwY7w5krq7BnCptkFz3fnOGFgQ3vX5+ZgrirWsrRVX\nKlAd\r\n=cpiv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZUVChYi56vM/Txc98WNHxOwb0WL49vEoylbuiAPkAvAiAkJ8r2toenCpM+Iyo+4pJKcU+SNXlMcnQZr9bLhnQ9bg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4dc32be3.0_1617234532218_0.6345424339109027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4b717f65.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4b717f65.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4b717f65.0","@material/mwc-tab":"0.21.0-canary.4b717f65.0","@material/mwc-tab-scroller":"0.21.0-canary.4b717f65.0","@material/tab":"=11.0.0-canary.24609b822.0","@material/tab-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"a7b21246791a74b1ae4e57975b1f4a394ad9cba4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a7b21246791a74b1ae4e57975b1f4a394ad9cba4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4b717f65.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-EXW1dAexXagIqK4KaYHIm8bIBylsypE+ErZ61KujOVmUPvFBcydK86XFl4SGrc16KDAi20yxpkzmv12vOgmdRg==","shasum":"dd5dd888ba5793bdb446ca412e848a817155480b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4b717f65.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZg2zCRA9TVsSAnZWagAAS3EP/25FTqcvC+YeGKCv1BIp\nsCwtvlyYqObrCTjAuAaO2cbWmLAMGocTjefGMLcmGpeuWPQ4FNxs3+JmQYwf\nmRDcoIrllgxefPleC9YyDXvV3y/Ekgq0ND5597mWhES8te3Xcx2NdBISldwy\n2vdRO0yXExQ+pV9p8iSIauYG2eSPY6NcRcyp7goxJohmivW7BFAlcLBeg2ht\nCLqGJseF2jhBoqvl8qsyiJ8L768OjpvpfqJLLidR98eNshX9EC0s+WAt9f54\nwNUaEfXCW+0n4yuOFcNagQQlxJrY6nvb65Fy1dk76c5RPdDwM5xDnyrP8R4F\nmZLJUNJtscQYdjltyc6/f4P4VkPnrELyFDg1PGwe2JRE2OSVxW8nEU1d4hN2\nCeElEQ64uNC23Awo0Tdpm1UktW3nZdue4nzz/Ve+De7eVy5bLJVKBsmOZjzg\nBdEgEDuELBcic3uyD2FD8qqlfi78iU0Eru6laWQxpf7re2J9kob3S+55/Rvc\nushTlhWosq+KXMjNxGIbMZrN7q5j/gHE96dZ0AuxwEpOeFgjgssrKU4LP42H\n0ews4P/cvhQ+vuspw/Ef/3ISN84is8zjx2U13X3aiHgT5kNhV8crTIWqEOb0\nxmK0S1jDphTu4SkTY+b06NcM4ZQcChhCmN8hwF7svwEmCHFPjLahflD9Mpib\n6nBN\r\n=OaBH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQ9NkhsZ8kxGDEkBgaL6sqCly1uQhIBkJKXqseJ2RX0wIgKl15DvxknafSWB03v4lxFNPiMtErpLKXbKacEQZRwl4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4b717f65.0_1617300915203_0.0076400989778910855"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c6870f20.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c6870f20.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c6870f20.0","@material/mwc-tab":"0.21.0-canary.c6870f20.0","@material/mwc-tab-scroller":"0.21.0-canary.c6870f20.0","@material/tab":"=11.0.0-canary.24609b822.0","@material/tab-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5808fd48fe9ee3cfe17f631aa6addaaa847cea19","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5808fd48fe9ee3cfe17f631aa6addaaa847cea19/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c6870f20.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-wXZG9x9nFR6Ba52Qifh4Mngqm84Sd6OPQGSPOp4aVN95TkOYut0B6o//elL1yXMG7fa8AOnvy/C78fuFmfjuJQ==","shasum":"ede8e81ca352c241c21fdd39bebed146fd0b6f89","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c6870f20.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZlp0CRA9TVsSAnZWagAAvAwP/1jILDHTfNu/1oYbgvZH\n/CGfXOrES9vf8bVlAc4B2WWAcU0VX4M2gMHlyl2X71gFp9RNqfnOtZjxa3eB\nBoc8/RDacjKBxn1QnbWa1PXEinbVEmuKnX8Q8pSCxAjpgbB5R+Y9MxfURT/S\nDgajXuyB03swiKv2AR7rEUmzfiB4nV3mHOGdpRt0rHsv+pS5EF7WVpP1Vfh5\n8f+VC0227A4NwvRs+B4lTcUVOBxDnjwotrnuQX1aT3Ap5d5KJeKqrl5cRfXT\nz+VweeOYI2nyLjSvMTSH4H3InQGVHGkz9PrIZnjIkf5UBx78W4LP4F+Vewa6\neJAVJ2+5Lfpg/v54bpi32MoAXes7NEEQ9ldyRmDL1SirGbfWhFj0oDxm5pVF\n2QfalvtauJJUzx5gri5BkPoB++IYvfseW0vDXrVwGlsgnRXbMW1VmANIuEL1\n1OsiNH6rVLWdpb+i2dHwXw4sHQXEdeKg7Dzgf8Mlb4lz7r7tpgDyiOoHKH2m\nvX2Zg6ZxBHh87JAeM4R1Z9tBuitG5KDNYwZjKrqEM27hAc/OBBakb4Mp2k1c\nuXT7God9aSBwff7KehsgOsbd1LwmZ6R3XHj6rF+1BUndIVMjHOQVwcu/fRrk\nsd1spv+LhQA6Q2Aawq7WVMq1DNZs3OMjoHs9VN3BsOSctisqUyedwmVOmt/q\nAnPo\r\n=9DJ3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB5bA7Oh40cK4RH4lzYTp5XBDcJJJTgNnbv3EOz042soAiAjFcekUF9wsPXmEnuv4s5r0OyM7vHZ5SIVPijVTQjqmA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c6870f20.0_1617320564254_0.8863509764910227"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.852f873c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.852f873c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.852f873c.0","@material/mwc-tab":"0.21.0-canary.852f873c.0","@material/mwc-tab-scroller":"0.21.0-canary.852f873c.0","@material/tab":"=11.0.0-canary.24609b822.0","@material/tab-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"f528b03c675bb05baf871766e103e6e35c28e203","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f528b03c675bb05baf871766e103e6e35c28e203/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.852f873c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-T4d9MvNM6twvNtKfqRHP5JJoOOUNG+2CWUTAYIbB8tMWsJqLQMoLgCrPFGL+j1p9oq8AOInSIiWqfv4ha2t0uw==","shasum":"b99c612a6ae5a40ee530cca642c084c2876dee20","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.852f873c.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZqomCRA9TVsSAnZWagAAG0cP/09kNcaKf4F7qUdNfcAR\ncDAkxcLwgWQPLL4DLW2BiIB1ZfVFULRdjCpGC6mJDcFPENvcmXhZF/IrHINr\nzRcjD89BfCjH4YjtUg85HSjsU5lgj34lA50oUb0rv+yWjpSCuwOLoHf40ugA\n8b+npwp3PHiobgjIiFug/ZUEk8ZxPOaqSvinHxY6bQ75OXXeLp+sXv6dkS9h\n5bLqZDcsOtbHqi3SmJmY862ZrMQYS2+Bcz3HUCSCHsmuSayIUoaCX/eTsABT\notnwbuDtpGP4W4f7y9ETWyj+I1a4tx/fK7EBckTUwel58y3QtIQUvQ5Zv2kj\nThn4AHgSeZ12tSnTDypE4uiSMb/vRd6jveFxhkKdsEnWKzh/K7qJITC/oGZl\n7+um9rw/7XUJbXZ5APwwgQzabqnXazn0hTRfiF/kM16rTY/1ab2UO11lvFza\nkL0O4o9HcHpOA2FNy0LZ/L/MxIEShiAzQd6GyWHSitSevcbYW1mcb1sM/YNg\nCu7X6N2efnmB9a7DBGxxEALM3noqZW4zrG0m5d9EV6xJch/eaXKkLRm9FWoa\nrBDeHr8SQQj0/ABOeGnnjXhryQ52wv5MwKMnAKwc4M/Pba8SkTc2W27mhXuz\nZphVLJv/72PjccQ+ZHdGCN2s8Bz9gEs9ZqB/1GGmy720Pt/CvR4i8edJiRln\nqcXw\r\n=X7T/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4DE8ZvTk4e//vVzJoqJ9dw9XdtEpHN7HBLG983fekSAIhAJDneuAQkV3CpQkIhZG1bx9VognhDzGkjfMycdOlKpBz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.852f873c.0_1617340966380_0.6049201854452864"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.4a674a1d.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.4a674a1d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.4a674a1d.0","@material/mwc-tab":"0.21.0-canary.4a674a1d.0","@material/mwc-tab-scroller":"0.21.0-canary.4a674a1d.0","@material/tab":"=11.0.0-canary.24609b822.0","@material/tab-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d4f9464090813f45495113dfd52201f8c86bab3f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d4f9464090813f45495113dfd52201f8c86bab3f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.4a674a1d.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-r69IzH39oAhOaIggmEJPnf4C400InVcpOjKwBcl/w5a8Uo2ECFh13HzRm21uUCgBnkLZTau7gHuY3npMRBvWcw==","shasum":"eadc561484149d2ce1b23ca2425248a652d42963","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.4a674a1d.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZy3pCRA9TVsSAnZWagAABS4P/3gNCR4hWMaly3Vr5K3h\nNAMUiCC9+XmHovO0UJMFP1EVfN+75UkbnftemmRh2mJOKv8N2O4mgS7+OREO\ny2J18Vk5B+vciDfS4sBHNiOFra5cGh724vZel8+ttVnkWs4apnhG1cZSdLQ/\nwSzMM04bVAvmaKRkX7ka/HMlnY+5TNlmpZ0gGeZ01IVpq+0Q6LC3/Yagc+3l\nyKO+irGZtOrlWseIA0jxrcRv10GMquVHDIRgeBONJ/tnIM8Hnm+ch4Wf2f4s\nFKWovYtlso2CxaXrFby3cy9FalqDPW9sScc114Fp7R1xgNCTB1xkCkK5DSID\nsGKRjeieabg/kKvwrmhUje5WUR9FfjLX9ig3gSLQIIEi7viUpcXqailp+wPS\nPKAHaHOjPIeuFTzRumik8GtBUpZTR6qfQUBT/nHW6GP+D3HYuIBhn1Cu/3iQ\nCI0/OLPiGuwVoexsVJy2bSNBj8mfBdm1Ss27DPqnM6BP/MSLon/r/e/z0XL/\nncqStqlu9qzNYm76WBrot5XBHFRSjud9Bs6X423+XmezC2u/FW2QOWoJBaPR\n2ta8haM1benNlFOaLKuf0GfZiDinMsPFUvGvYC5TbPN2d4gDoi3M5xWbdApw\nijWbpxaOR29DLI30Yj1iQ3fhxdHaO0zDM6ITM6rC68IpiVmZnOxAyT4kx9IN\nSyMz\r\n=00kZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXhrTgLJIpuZq5xBujjOW4m7UewjpTFvUG61YEo+oFuQIhAMvyebf0phh2HImxG6kZnTWtJDqsPJwO9lGSL79HYUIe"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.4a674a1d.0_1617374696930_0.7958641532444881"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c5b29ff1.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c5b29ff1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c5b29ff1.0","@material/mwc-tab":"0.21.0-canary.c5b29ff1.0","@material/mwc-tab-scroller":"0.21.0-canary.c5b29ff1.0","@material/tab":"=11.0.0-canary.24609b822.0","@material/tab-bar":"=11.0.0-canary.24609b822.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c1604e99ccbc76c92a4371c529c43a4997f78c3e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c1604e99ccbc76c92a4371c529c43a4997f78c3e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c5b29ff1.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-L8YCJkLa77gq3+SOWceYVLll1HRlNJ+Gail4fPSc28fLZyYUYIQhWUYGju7Nbf7Qxs6GivCNSPzeo1c3QPu6CQ==","shasum":"6527f397b69589fa0c630741cbb6e6c056a80196","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c5b29ff1.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga03yCRA9TVsSAnZWagAAunwP/RbY3rXt1a8hPScG3Ust\n1aT5khkceMbaEHlN4wXoNLadPg5yEoPGbYnCs1EFheFBnjuEyWEY4+sXJIJx\nPIyOdAt9ugFZMtyWpfVRXSozVAd/o1wX3s9scglmsXAzw5tCs+ddtq9UNP3H\n8gm20Fkupr/6z5DSIsrQhgDPsngsWoXjk0nYwn3mC88lDbBK/9wBakPu+6nk\nJidX4AsFiay5+lrftWtSQUhI1Dotr+4H6aeS0/yiLnpfVUMeUxxaIhzDVkJm\ncQnXF2vZ/CUnrNzM88HpiXArMIDLb83MRnXk2ZU5oFmqNCnz4XAOekKgqDKo\ngjyTk1yXlp/jr1FjpkqEKo6G3ajsJA7CxVQlDfRu/1shNLUVJBC0w4xNgT0k\nx1ElaA8IsH3zKyK4JmoSzx60Nrr69wBZu8WQ75jAFpnp6iBxxEoLctwSO6/a\nENcSYOpPi3KA/hQdllNdnAMir5d4Q4FcPlAEZjq1Gv++gTWn9ePT1LcMtwup\nRwOai2GaQ6U6Kwy7d/luHXb4Bmk7btq4PJm9HCZ8dlmO+kebnDijeUOoYY5i\nvceyNKF8hIeJBVlBCrp75IoXOjXnnX0g09AxbwtJDuzGJlvXJBTgoqbIFvQW\nLGHUw7bszZOkIVcMQ7AYi5ST6QiGwKgPGoJakm+YqzAAj8D4CQAnZ1fjCjWb\n0RQn\r\n=Mh5T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEP3QVJBt/GhjIT0WKfJnNrdLyj1YStsnI/5EeLJulU6AiEAgugfIh4VBEs4tZCX4KJ/vnCHiW/eF6sEQiQZXasZzhM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c5b29ff1.0_1617645041647_0.6637591284006661"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.583644a6.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.583644a6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.583644a6.0","@material/mwc-tab":"0.21.0-canary.583644a6.0","@material/mwc-tab-scroller":"0.21.0-canary.583644a6.0","@material/tab":"=11.0.0-canary.94f50b260.0","@material/tab-bar":"=11.0.0-canary.94f50b260.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"bf2f1c715105004d3849ec66e044434d48e08296","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bf2f1c715105004d3849ec66e044434d48e08296/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.583644a6.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-DgCcxirMNzeiERfaXHn3TfxYyo+5skY1zUjdyCQdC0zsys5T5Cj0QdcaHdx/NchEXDwUfAMLBQrbKgXSQoFSEw==","shasum":"46351079dd0c529cadfa6d27c171e5e117cf7922","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.583644a6.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga04rCRA9TVsSAnZWagAAgX0P/iWIlg1DeZ719fK7x524\nmif+YfX7dAwxEC1o8WgkAjA1Eezip26wqP7cRaF289cGjBYyB6DWnalnH73S\nKbAgjJDPl+ASBq8SY2bzHAg7di+yPsnFkdNUJg/igpP34JXlTRLJm6coapTl\nJjICuoW6rbJl2vaxkPip/2oveI2Z2WRTnoVdvX9NiSHNawARGb8rIENd2A4T\nvL8m9H/Yvh7hiTyjxhaATXe4FrR2HCeIqT1axLeRLdRBiA2xiHwYLafXj36g\n9ouSRjMdwemK4rhDiQSIItQxQX+Ab6U3kSWjUzzP5Z6rn0H2hXT/zf8PIL0j\ndmgSXepzSqDmg5HKEoXzWd+4VpiGwbzjCgBM5syrsFzQ+XM8w5CCCU4gB6kM\nDFNNh9ca3PwZmcol289VVqAoBlL/rDXUhfBpiCYlCG7XfgghA3kFyAlW6Oxd\nsMpjUx7Qnk01OMp8LuPobn95zTENXX41h8EkD1kmtkINc5KcknU3P0EWbcs7\ntTbM4M67Da3kSvvopuVhStca2IFqdaapT0C9xjwV2kMxAsbmLM6X8M9oV95I\nYsovLKl1CICeKkS5N2Hk9BXwNwAanoK+EF9Yovb8sWXwQ8+d3TyMTZV3J+Np\nMZRu0nQYPaa/2mIY5HbE4i0b8CFhY+qkOg8Y2FIabhN2xUvn9HZNgW18hGxM\n/i9a\r\n=R4cm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDR63kftdFXHQVGWkwiHVnpIwK2OqzfSGZ5p8TTxdnW2wIgKIgGR6h6EseF5QVI3zvumNdVigI3++DjVVAIigXKZAY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.583644a6.0_1617645098858_0.33276410252939526"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.02ac1e6b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.02ac1e6b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.02ac1e6b.0","@material/mwc-tab":"0.21.0-canary.02ac1e6b.0","@material/mwc-tab-scroller":"0.21.0-canary.02ac1e6b.0","@material/tab":"=11.0.0-canary.15604bd0d.0","@material/tab-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"c6e525b215b6043eb042d3feb1f6066bd536bd94","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6e525b215b6043eb042d3feb1f6066bd536bd94/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.02ac1e6b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-HUOX4dfzjrO5ONgT5n80JM51JWaAnUHwsi+wkSzescVMZhKuO3gB/OaEnfMFOS5BLxulVrKQsbhGbuKVGKASpQ==","shasum":"597ec7afb6d1a1ac81a02e13c9dde35c6c6cd3f5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.02ac1e6b.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKpPCRA9TVsSAnZWagAAXFQP+gNamBLDpsu+dZVnaqrW\ngYltR6yvjLuDYUKoZ0OybisUKpijtoY3dF466JvKu+0gkO0MELE7G/NEcsz+\nYynl8UVf6W1RXpwywnov/2b8oIfX5OOH4Fy4DAm7LaNHzYYxHELbrvXWoVf6\n9Jb1oxxwUrpRYN5gubA8OmRx3UMFubiiiav5XlK8neHWiCTgx/vjEBQcXiVq\ni4+UZ+Hkc0yVaztKuoRrZVgPKWPGFrjXFvY0p2eyPobN/pGIXWCw45M9ALhN\n5l0/j8MSbI/gMejR8+tbIdrzOqAi1geyE2BBZK++s/jsT77A74dmBefduYsD\nrGviKLJSSUxlYmxBdjlGutQNh5D+IgQ3YHKHmmW780WHa8LNb62GDwpcL8kj\nv7HV8MYDdlFs9vYXrSdvABWwDcyRMEGMVNXCWp0HmOKsW/xWwjWrKr8BtXC7\nZBvjidk4d1GLF6iYvqF462e4IAbPmgEPYv39yijP1pcDc539ITChQTO/a5bC\nXBiyZzlRI3AK78Oo/+ga8qPSjv5+kAuMVhyX4EyPdNZaY437JeSQh7ycKdGQ\nrd5nTyrf0Ijc6sGmY45H33TPOaiSKIDjbrIYSu1EVmDlf9L9rz6J8+agZrT7\naZFWH5FL2nT33J/NAWHc3oIOD1TbM2Yx5X6EKoHBMvloJ7wlwALRsruQw1+M\nHncb\r\n=RCA8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDsUGk9pIHgQDjTqQhrG8vjbOLjzXQgmhSRnUHA9RpTqwIgR/DVT65xLzrlV4p43SskqmVEY04qro2XsMbbqKrhUNU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.02ac1e6b.0_1617734222983_0.06935285584648687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5ac5856e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5ac5856e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5ac5856e.0","@material/mwc-tab":"0.21.0-canary.5ac5856e.0","@material/mwc-tab-scroller":"0.21.0-canary.5ac5856e.0","@material/tab":"=11.0.0-canary.15604bd0d.0","@material/tab-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"66f695ff77b118469a93aac22c76e5e558c242a7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f695ff77b118469a93aac22c76e5e558c242a7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5ac5856e.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-sxV7hRFIWdeb24SFQWmPqSKSPIVVLni1ayqBUq79lzyDKDeUIOMeYBwkSa2DQ+5THgVEWjDBy2D6TGh44qp0tw==","shasum":"8044859a581244064242ca690bc43ca3daba4dc8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5ac5856e.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbKvPCRA9TVsSAnZWagAAIJUP/indCOE4b2ZaJXR4Ysv2\neMLtk4CgvsRRu4Dm5Fw78f+4+VwIz2wOGjoiAmEyRNGusEO8ZetfGzmOhgpK\ngFd3pMQnnoS16dvtjBvXCI95vn7z1eeKaHFLnlSocerU+xzSdsAqrN6Eryna\noWcXy9zGT+fSK1lEEM4erwXdqxlAiykhVbnoeZS66ITTicqn8G3Gz6nTCBch\nrqi/8aR/cANPTmdLr04y1tb3ZpeDHc6Sug4HV7cCTG+P/xqqn7gxE25EqxG/\nXQNLL2fXEL4n8r5ipgVMGebeMMO45GxUxRMDg4a7I97T6nLDZc0jqzXyX4I5\nWiWr5mvDxVmHgXoeEk5ARL8xSorycS83qLLyNMU9ND+rmKHwsNpTO/MEdnqp\nMbVztRDJdB3vjucSsrkjTTEUU7dHdRaBtreVV9ZgRqBqLOwJMwWJC16w6Shr\nNLzLSsSTXxJmIuWBS1zj+40xj5dJBm5b9yiR8zlzFwYWRoR5jDQrg+OPNMxA\nsZDgmgpPHyOsR5Zq0yPx3fk4A1FqyXFKoU4nllmdL4WGJ6pcdypdQdKRl4Hj\nPJm46M0sSB3vPeTeykGKknEDMxqtjdkjHtqOnnZBkC9XyojEH8fX/c0L4UEr\nbbF+Q/Kz5s9Bc/617AYA1gZ5IoTuXm81pnA/IhemfdYuD4HQ1GKlCnQbflqJ\nz715\r\n=51bL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHZqoTyYUKnsaCXffRe7d1VrY3/e1qmGlfLojzk6KOXvAiAoODABYRQiQgIomstAsqZrcipMGd4UHgHy6cV5ULgCzg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5ac5856e.0_1617734607458_0.009779550277581484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.bb23dbc4.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.bb23dbc4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.bb23dbc4.0","@material/mwc-tab":"0.21.0-canary.bb23dbc4.0","@material/mwc-tab-scroller":"0.21.0-canary.bb23dbc4.0","@material/tab":"=11.0.0-canary.15604bd0d.0","@material/tab-bar":"=11.0.0-canary.15604bd0d.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"42e5f906ec61897cd0de7e0e19e686d807408d70","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/42e5f906ec61897cd0de7e0e19e686d807408d70/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.bb23dbc4.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-JlEGCuQZJARHZIaraUwUOlcjPZPAejAUBiBIDcRlzBSByEm9egHvuhJCKQZHI6pL2bjIDGhT65e/HMIiLlLkQQ==","shasum":"334616f7c4a32591e5677aa499aaae7a63d6b0d1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.bb23dbc4.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbiMQCRA9TVsSAnZWagAAAdYP/0hFgjeegSNZ0wkpZmIE\nDDFnihzgEcLrD2nfJk7U/j9NtfaHLhSsElRwm7PKbraTZpNiSGTrqQuPW5Z2\nazzTSQ4IxBSS0Y1dpcNkqLGj2nb5AcqdTONrPmrhjNIgpNGd+6p9a+KV87Ek\nFy7LZr4iZIO2fL6LPSFP6No+qM0O6Bjw5k1kO6MpvoNdoOQ8REq+VJlwmKKY\necN/YrCq0S8tQqbUMg32o4teeNod5FWqQ47/exFGeHQBXyj9x85MQSiMa+tz\nHsCQgjFCe48NDilhKS+Etv7OabB4+t/2L+1ukoej1JAk+b3/5oMGgkhwdEDS\n7Qxfob/FwvRAEm6Jt9LUgJEwITuGm7dKE7eTnGKfs9f1PIGTGECUm6xIrR05\nKHznKi5clTj4i9MVUrw0ngM2cVNm4VL/w99+Zs8Ojs+i8rv2RpUG20DWbTR3\nzTqjPl+4OV0+czdLihB3pkJ22VQcg2QIFoUX/zdofBcoG/fJRqtNPGdC5fUW\nNa81nSDMqNtSLwwXVityOlLeO2267m5Cfy1jfAvKt2dx0uDtWaK1NlWTwy+P\n8om3LaYBCDURUaZKVtdadbjyck1m0c487hZDWc73oQg3bWz/PvcXLkH3++Zx\n8e5mVwrDi6nsjL5EfdlyGOsOYLeOI30Lrm1Dep6/SxdCWW2MHGoZUtgbNH8p\nNdSw\r\n=8PIi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7oXaPovBTOA1rX7zPqvDvUM+wBtjGJQJ42f1SJUgVTAIhAL+4cI1bCkXO84I7eTg5h5KQm5nFwKfymt5osptE6g6R"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.bb23dbc4.0_1617830672136_0.26886392413247506"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e539904c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.e539904c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e539904c.0","@material/mwc-tab":"0.21.0-canary.e539904c.0","@material/mwc-tab-scroller":"0.21.0-canary.e539904c.0","@material/tab":"=11.0.0-canary.c91e8d141.0","@material/tab-bar":"=11.0.0-canary.c91e8d141.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"0522583b3f6a950dde45ae308718f06d90d40a84","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0522583b3f6a950dde45ae308718f06d90d40a84/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.e539904c.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-TNsX2v6kr7IBXDn2iJlhI60ObpWoKwQqRM8fsYhHHCymzWNSY5L3ebXkrRKwRlzztg5If0sEdLyP3lU5SAVrJQ==","shasum":"482c1c3e0cad0bf6aaa8460c8e6e9374e52550d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.e539904c.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb0U6CRA9TVsSAnZWagAAi6AQAIcnKSRlZSWpqtkZ9Fg3\nhFi61tsr4gPNzb5RkCHuXEaA/ZssfIeuPM7HwfSM8Av883qs89PTJG+HNzRF\nVywGFabXJLNmvaIKadVJdGcTXsyR/NzvBR/Y9e4PaOJAz4TtGXF/gq0Af5rI\nlobWSkK3L32GByBDGHiYpzCPbOFb23/kn0t4ywQzUhvAFk6uguQFFUrZulIZ\nWYg2za13Ta2fUJFjThdDEps/ydhSJ5XFqWkbPvCz47mj84tqZ53QjZn5aZ/V\nZVgrRE7Bm3Wfj2KHienwwtkCp3/0FS5G8rW3Segheuwcsy/Si6UgTVIQD4JV\n5Rb0knjdC5bLixJThaHnL+yfeB6b/YEAAMeRx58jOsGd1Zf1HK/7qMPi6hNR\nz1Nyfa7uxaW6RcD2WOPNsBVGu9dD1kDP2naRTd9oZkcuao74/h6/TyNoD8ai\nDWQSzi23VSBx/rjaCikwC7XZtvz7Spvghht3Kzxg+0dImMpgbFFXGGLhN2V+\nhi1e4AIQoTPJy4jN9aXJnJtMKi4kbVHcTUYqElJ3FS42MZr8cV8O9BSXDt24\nk/bOc2CMVzPCU4g4R0KqXq05aQgVyyMc7a5KtyWJrTLg5CJ3qblHcN4tB7V8\nDNI51nt+YdPt0EvoDulU9l8vLm8QjkIv4WoTteWx/U5ILY2U6E2cGbhfp4W/\nxstC\r\n=T4kr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCc7/oxaDJ6mIy7YRLaX1nA8nuFtkf1A2pHXIL0o3VUWwIgXC9hblTDIra7s07vSWM3z14p/DBeHSdhQLjujAwm2jg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.e539904c.0_1617904953568_0.05007413165017871"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.a93ae333.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.a93ae333.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.a93ae333.0","@material/mwc-tab":"0.21.0-canary.a93ae333.0","@material/mwc-tab-scroller":"0.21.0-canary.a93ae333.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","@material/tab-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/31a1d0d94dbc7ba9d8611ebd62d41024f6fa88bb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.a93ae333.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-uiK72sI3py2a94/yH2bAEjjJQpdldED2PnkPPs6YfwPH+Uy8LOwGYRprJ9vZgr5om0xCftSLo1Gt2sJggorPZg==","shasum":"1a354542516f0932e4853df1dc6544ab56f48f2d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.a93ae333.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLUhCRA9TVsSAnZWagAAshcP/j1buzDEChFZqwldEwIn\nc5XLMj1XDVTtX62lx05RNJDoZkKliVpixgVDi+0diUC6itaolHRqzgGDMDkl\ns2T0aPW43vqHDcnbviYVf4ssch3Mk+DxVuKASQgiqF9xrsNCR+hiSr5m55hX\n8AQsdxg/3YZPLBI2XmBNxsk3Io1s2gyBKJ/fnUIC1ciB7ElxDWdYWzJ5MU6n\nCbCCWX+PHT+YdYBrA7KVX9/SmlL1weWHEYRXfGG7zZ2MwkVMobGqF0m+HVHl\nX2bCoChW1PLy3ObvsW9POfVVhK04zSszCEg21oeS1Yt0DTcJJqR9UZa1bMiv\noOnJtFGO4x2IHE+GBc/GHX9xbjx2b2iXCRFLpDQUZTPeI/TIboeLmjFDho5/\nPC97RguxMiVqQPeq5lAAJfw/waPX1PKhywvgZfehsFN+36em+nNAc3u6qjpt\nxmNxyWn3pDeyGP9plxvUJdqjH7k0cgUHJyIE6knECj3wjhGvSFzissiq/jb1\no7wrLX4y9WRd3cjtbJ/HqSV9MQ3t4Aycqtm1mGminuOexUoWp+CdKp6mJYUn\nB6cGcJ267jIWrpFpxyQxCi9CWA/8qPSO/fLBt7Pa7R5Q9PFWzd9jcdlPCx7z\nE5C57R6uob2Bt+WOJqWJhspZOiV5vH2dwB2eo+aL1P78orZA9vwP9H3VvL9X\nWp8S\r\n=YYkc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkYpTDRwhdJHH+ZgKxuJ9E72Zus9h0le28IZbYzdYa0wIgNSfeOMsXIgzEuVxMhMurhK+KYwdDkCK0MsPgl4OHzZA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.a93ae333.0_1617999134114_0.28142037988234203"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.e142c144.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.e142c144.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.e142c144.0","@material/mwc-tab":"0.21.0-canary.e142c144.0","@material/mwc-tab-scroller":"0.21.0-canary.e142c144.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","@material/tab-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"135f2f0e24347fef74904a437124ccf8978e20b3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/135f2f0e24347fef74904a437124ccf8978e20b3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.e142c144.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-WNhsq40Ia+FjJKdPmfnvmr4WyKBE02J5fvjycvuQBNijVSd2Rbxu/kU2PM4d+6BfWANTBg4nl4Xh0QzWtvXGTw==","shasum":"6f2bdab33a8bb7c999b5deb486ce86da1e4dd95a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.e142c144.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdF5kCRA9TVsSAnZWagAAVCQP/2u4bzFZec4GexJq1zWB\n7u13vyVsdOL55SGNuA4oAzaFJ9xaTQv4lJTW/48E/4WKVpOpk+nusOxhb9Dh\njTB+9EzhjDDiEwlDYf3Vt0kPzhpye6oKqwoPOcupgUIJIweZbLj9xACnRvvm\n+GEjt1QcwZCmndtcWMRXr+h+GLyvgFnCvZK4YV6pIkaKFyuyTtTnnBJLbdTW\nOIFIPRyCoaXI0swWeG5CDcMyIYZokkyt1GWu0b46zVU4TpObeRcCq9rCld+m\nB+ZK3W8gRUNNTDIdrhQs5qClI5hRILZzj1GqF+QLAutTl4KKtO33kbJdiV6w\n6b2GMR8wTe8Go6u4gTIZTn3Su9PyyMNjDnndFRr4kXVUlJadH34xonnGhQhi\nWgyYklcY0RHGNL1gqVVKjEnjPcJxx52RNTdGxn54VB/Hy+XjR7JVig1aLHBL\nFO1S+ncWi935hdZEJ4BIO4dwXBxcJbtwf4zH5MmgzaZiBC8Fi1mHWQEpZTgB\nbUmDxnHxtpKpMpk6v7LcytwLDmEXYFGgYEktiQVsmukQQoFs+WBrjvt6Ij8E\nt0BZK1ovrCJohAmW/bPFm31LbSU0OsHYBaM02k4hKNxb/M1p5ldQBGz8oz/V\n2Keh31tH9uBMy2ooOTT67kvp7hUq4l1UXH+ryQJxArwomZAHXS5C2NzXi5oy\npgyj\r\n=citY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB9TLfP8n/uYPonFH3nVaKGm9H/iViqHjkdWGKEC/346AiEA1WrUsgbIu3Uh/WNy5GBGqynyfuEYraLDOfET2H3j7rE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.e142c144.0_1618239076233_0.7446241963129108"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.382d7eb0.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.382d7eb0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.382d7eb0.0","@material/mwc-tab":"0.21.0-canary.382d7eb0.0","@material/mwc-tab-scroller":"0.21.0-canary.382d7eb0.0","@material/tab":"=11.0.0-canary.b2fa996a1.0","@material/tab-bar":"=11.0.0-canary.b2fa996a1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"22f558ec852007036c1b01f2d052ff4512cfb420","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/22f558ec852007036c1b01f2d052ff4512cfb420/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.382d7eb0.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-2j7OEtpi94Hq+dmvld/p0q7yeB/Zq/DWjyT00Y1tiRBDzccX0cN0OVniCDIBhGfxT5DAepQx2NMPKu5IYO+n9g==","shasum":"80c14fd2e12a85e527323532f3cda709bf261dcc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.382d7eb0.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMRMCRA9TVsSAnZWagAAId4P/3gKdSTh1F0p14W27XZ1\nFwxmLxBFwCqb0hj/u4nuBaC14IOOTXqJ7D4c3U/VnYfJqQ0S51uYjwOLz0W6\nhBXKQOPq55NmQ+cam43kkwYTaKGl4xHL/9zGkaRvF9mXm+msQ9HJHANywTJt\nX5bMnujHxT9lWnEy+DOOFWkpJJu6leurwDRzyIkixrl4zz3/mzoIqMIXAy2z\nEvIq8s4rbDGRDb9aQFJn9bwWzVRih/jNhX4FiGU5AXzYD34fciWj8OS+7/6o\nsJ6qj6myNfCB3oNnh31hU96fGZeSS1jd3Cl/VvJae7K41Hdge/7biWuK7y7Y\nhDBgYdEIGlV7V6n1P5DD6oQak2SD7H1kDMqxPGLyLtAANbUAL9QwFbMcA0uP\ndVRM2LS9P4mGRac3O7hn4WZ/Y8sadkV/9gMuFobkh4e8JO/IWqXej/bMXfWs\nRvJJCuC43gtPlH5ah2Wyus1Xycd/mDs8CFklu7Aq1jTwW5kwboHqtX3E3gnk\nNc+fOj7MR82EpxtDTJm8HIpQagyV+6djpjS4o1PRuRwlWL7MsLwH0Yn/yb6p\nsHAX/tbFlzsrxvmdcTxm0KJ0Zk2LEjEgYzDp5uUahft0SuEK+ywmN+idYXJU\nptz6qGQPmO8gG24XJTh/3aj8XJeVjLrShEzl8sRZIKhW671+MgGA1PwvTCK3\n/9oF\r\n=YsK8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDpEF/llHB9gWadaLFwcgIeUNz/uBvmiC/n+9+DAL3BPQIhAJeQHc9nnY0eheWYT9RN9xnUOCTYzMA332H3VIlw6WuD"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.382d7eb0.0_1618265164247_0.5904769522160573"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.b16c7885.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.b16c7885.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.b16c7885.0","@material/mwc-tab":"0.21.0-canary.b16c7885.0","@material/mwc-tab-scroller":"0.21.0-canary.b16c7885.0","@material/tab":"=11.0.0-canary.352b295c1.0","@material/tab-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"effabeb19d8128aa03c36be651c6b4eb98d15e9a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/effabeb19d8128aa03c36be651c6b4eb98d15e9a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.b16c7885.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-SAmPRYPLihklH3qNR5JJMeX+HcOfjijKRovF8gzfPnh3fLzE3PRb8paYdJAkx41s60H6ks76GEQ9PLgxgM6B9g==","shasum":"aa0e7df2a528080b5c890c35c9fd977a30a5b1a8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.b16c7885.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdMwtCRA9TVsSAnZWagAAnS0QAJNOUVcRnEOZbtkdhvao\nLwLZFzu7vIKdQu41aj1ZU1++QXXEZA4UCr3MwX2pOW64H2GyhCk2NdnlMrHj\nBRXkY1Y4NZ7IhIkglSfgeMdfByCmxvGFC1wXDOtMnALobnIfADJG26IS9O6+\nKXM5EEkOQI8dAhwKlw0xQ0x91yCHQikEGUbQtw30lLFEipeVX5fDl5qQshhI\nbwv3d8ZsjmRai0cgPsGFI7UUhVPZmI2qaga7cB87zGmUOeTpyHd5fK7IM2gE\ndTcM8P+bko+3UTXYYcW8FO78lB66cWpk9M0JtOC5qzbN8/RU340LbFxyRVBe\nbAX+8ZfDV0vqZywCu8o5OBnZ/5mwLHNMOzrAaJ3wyW1prX9h8InAmUDDkt6A\nO+D96ZqsSLKKBm8KxBqIY8ghMUyLpq0z3b0DETF8oqXmmB8QqPiyJUocj2QI\nxT3IwzEWc/gdpRk+e2J+yENKFlxrLTYFzy9ngOpn6W7K0stL6b50vIqNtjub\nvBSklyHKzZkw36YfQi5F9uNosK/1PBTXJHHmnZQdHMuWt2eLDzZXaG65nkiN\npKVomt92Ih+2iPl61US3HxDnhsJ9tBj9OCvyw6Adqcq8nj2PiL+cThF4zqq7\nWXyuIT66kSQIK8Z596b65LghKKoD5YaDvroyZnKw6o8wqWpwRIdJGmtBzOsS\nM6OP\r\n=ZI8u\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICcbvYzBvNGnKIWDPevkLEQPqO5pXpRbGpvWA11TYbehAiEA01womx8UrPg8h6BUAzEt7tW0a5imHJuknblWknG1M3E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.b16c7885.0_1618267181326_0.3275746720826085"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0e92782b.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0e92782b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0e92782b.0","@material/mwc-tab":"0.21.0-canary.0e92782b.0","@material/mwc-tab-scroller":"0.21.0-canary.0e92782b.0","@material/tab":"=11.0.0-canary.352b295c1.0","@material/tab-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7c46ee6728f96c896cbcb981be39309e7fd3f60b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c46ee6728f96c896cbcb981be39309e7fd3f60b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0e92782b.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-tfyViTdW0ruKAuKrhdYpIXx2iWad9jL7MiFLwahkRtTddAvYILE0X582pQXgG+3ULE9LdIkDIMXw6CYTzf5kLQ==","shasum":"8609519b0bd72add0449926074444311202da96b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0e92782b.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda3XCRA9TVsSAnZWagAA7DgQAIaqqOqnc/GfFVKsD5kb\nnonXIi2CZVqeWru99Rf5Khh6zVKsjdc6qiWCcqCNaDUQqo+CSbScWTtyUa29\ngk4obTOMf0rC2YmDXYATf8eyT/qB9XMsC5hcONfVYB+gYcQx2ugu1kWFGuzY\nZpgFdWWjsCKJq9lMwc0m/VGQ9/OPAS/qfeQondDYy3uKoCJONudoB2keUygL\n0WmodYEH2389I+OgxPDcVLCfTQgNtgzLzPqGBUKUv+46a9gosbGkcUNpRDwG\nK9JGNbGMQRjoQqQBYkxFw9Wf/Rj4VfCT0FlYYyAXhgSSgyCe+A+L1NN5Ztfg\nnAlgfruVuIJVqyXjl425AKvcGi+PKbWyu1F+t5FccaM/Y+Vjx0+lz+sg31Wr\nUdrZ1tXCgKqV/z3q49LDara9k08Kgnhiknw8JIaCZhfxCk5UhhF73TNIcyWH\nbeM0qr/jjIbW++4CaDGcP//n3Q8ZSjON11nz/guRa9GqIv95Ad4O+LaAymVS\nQ1Z3FY/3Q97RJdMvcGIcqzz/tLAKNzQanPtk4qXM1Z2grwBvAIbc1p+E6dcH\nRz4LaNHi2HdzoMJ69vFTuVyPHXO9vIX4BPVpgZ0uUREqR9xrNSJbJArBQKfn\nhUkT9MSuLIKJj0SWKScFGznrvJ5z8q6w5192N9U8OF6b7SfOf/UN4monb8KT\ntmu5\r\n=377B\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDg57jJ4/deUrBZwaD4WwZ58WTob5IMz8JMFGYnNJKSvAIgKA0ly4ZFimQy0lxrZsJ7BZdX9HN8jL3ik+7LPwR/Vxk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0e92782b.0_1618324951158_0.4188350571377273"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.70b3a072.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.70b3a072.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.70b3a072.0","@material/mwc-tab":"0.21.0-canary.70b3a072.0","@material/mwc-tab-scroller":"0.21.0-canary.70b3a072.0","@material/tab":"=11.0.0-canary.352b295c1.0","@material/tab-bar":"=11.0.0-canary.352b295c1.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"12958287de673f6ce0eb511950c61be3d1a28235","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/12958287de673f6ce0eb511950c61be3d1a28235/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.70b3a072.0","_nodeVersion":"10.24.0","_npmVersion":"lerna/3.22.1/node@v10.24.0+x64 (linux)","dist":{"integrity":"sha512-E0B2BD+wexqkEeikkPntBFVJ+AZiAfH828PR6WohioWjSmSp0DAkKw/lhiikTxlZU2+B3MOcq6qfKJxXHSTcCw==","shasum":"fd2441936412464261bbd1a0546201124000b1f0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.70b3a072.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd2wrCRA9TVsSAnZWagAAfa4QAJ9XLvSqVA8pogQLu4eb\nrzOz+ArlqsC6ikxEuwx+/A64XzdSVAfrpQk4ihgcLIcj5VKYV5nPliVYN7/s\nDhyB8SGkNUhr1qg/9yvtIDUq4X8Ojc/525xMkTk6e1XMB5suJISM5k1D1aLM\nDYE0yGZx6OIdCJfV7fgELsDDmrVZeNWWGzu7vdQ7Jkdkcb+HRcdK3pjWAlkv\nL4E6DHyyPGdkBPTs48xgxP49jABAx888nmV2IO4fb8bWH8zR3Gll62LMT06L\nj3ElXZAgT9BtSOALWcY+XWHtoMZ+VFtv3G3yhQemOecI275UxPEJi0dZE6xL\nmmBkrBsW+7gNqFk7K/8o5kvoNzbuDqxO50fvW7+W9uZgSzGJfyOzsIZLcWGs\nVvUKbS7J8ERlrMaQh4cDkxQGZaCzG9vbnZK/oQ0/1wSchDQLJ6odcOiTFhNI\nOOiD+nrX0Sn3EUY0L7j6KYuqkG3YZaSYx4IYHLzNX8V02yIY65rgkgOM4nfh\nCuxH6Rg+zWDExUSH/6wGWpPWXDOSMCTWPYH+vzdgnc08F+tflpMLAGFTiDcC\nzX2RvXKDsGV4EtgIk2+w+x9gvnUVO9aU8tzVqtNzC371POlWFGea3rHzqQ5l\ns50H9egg/O3I1CQMi5rURLu+4hI4NQoBCl0m4hCrMVghVQfwctoB4rMI8XXO\nKVcJ\r\n=Z0oF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEoqZp6lzrIx1HaRcZzbfJ3a+zTaSb350sWWffZYZi3OAiEAz9vWrQFw/PiFkOM7Sga2N4hXGCH0A3JJV2pPcRy6uc8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.70b3a072.0_1618439210699_0.32064952376746425"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.ff79b092.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.ff79b092.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.ff79b092.0","@material/mwc-tab":"0.21.0-canary.ff79b092.0","@material/mwc-tab-scroller":"0.21.0-canary.ff79b092.0","@material/tab":"=11.0.0-canary.3793a3143.0","@material/tab-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"88513d2e247534891581014622ab048f4f2c52cf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/88513d2e247534891581014622ab048f4f2c52cf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.ff79b092.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eUujhLrrBwKBIhZI4Imi6DzNwJg/wlUu0MQldsxlE4dOMn0Qrn1Uy/JlqvKwzPHHTubYHAkwhzEog2M1VNBpCQ==","shasum":"c84dc40a18ff7f98da07a46a6919f5dc8686b783","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.ff79b092.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI1TCRA9TVsSAnZWagAAIxgP/Rhe5bKjPUgVFtg9NLUU\n4EvVjkqV41oF1ENt2pQ+p6GM6uBvdpm6UmESZz9aCbeKA3Vj02vqchABKBqA\nPaYWGKH3U3YBwF9ySvkYleqgI1eJordJetAerBS+qyl/ZP4ZgJEbbB3IIY+a\n2YQSxi1sBZAgfzLIrK2iTFuIRlz6Qp0DC4K1bTexuIHEph+KXa1Ns5Jq+MEz\nxECdYimLjVXjbm+CBnRprxs9qT5t+cxGF0jRmtMVGSHDKFb01pD/rvpc5jCo\nEnIivXsBQiuApZ+uzlfcj4IXu1GKP31WWPZgL5m3oTm60PyQn/h5u0SCEAYm\nJJfktmmgeaPOkRzSQ0f5ER3bzgLoMssCyudGFAQ3Nb1Nt0+5Rz+eoTqNpNJW\nvaDbfr3ZNwmpCuCro15pktGuW85t+W1iPr03DBoqCLvduFg9rAaZDl45rtge\nYzteoSFjU7V6Clqx8T8KQbsXW0LdwtJ8ihIs4P5xCZ/np4rfI70vk1o8XAsV\nFUFk/ft9NJCwfz38hpP4nUbtAOkQx0HYryCfgsaGUB5MjuJlQEGp3lQiUVIp\nmTuobkW2Cb/CTGQ2wMCQTmPBFezCvtRuIzQcTqxV+ixisR2186euj9N2UO5/\nfCSqXlyPs2VO4hFAaelTjlg6JaujMeFt37lj1l6VfF/4yvhi+JJ7/WjCURbY\nJvkW\r\n=N5yA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNILQHb1iSfP84nGlHKG/Ml0b5XRb9mt8FUXF9TsP5jAIgMynH3t4S2oCoVdD8pOehpNhzYv2p5bED061o0uLxRG0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.ff79b092.0_1618513234935_0.7407355511137992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.f35b2fd7.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.f35b2fd7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.f35b2fd7.0","@material/mwc-tab":"0.21.0-canary.f35b2fd7.0","@material/mwc-tab-scroller":"0.21.0-canary.f35b2fd7.0","@material/tab":"=11.0.0-canary.3793a3143.0","@material/tab-bar":"=11.0.0-canary.3793a3143.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2b12bd76b8558ed1f827fb23b46af6854b404f91","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2b12bd76b8558ed1f827fb23b46af6854b404f91/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.f35b2fd7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kZBg8NL/g29Hl1tp472Ej5ghwc6OW18A8GzUZLBlM+ykLPBjPWhrrW+xjcD5yitB6WZyzkuCbGwk7kR685xUTg==","shasum":"de02108b274c49c0f075667b0a4429e3ad2813f5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.f35b2fd7.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeI+/CRA9TVsSAnZWagAAYjgQAJ0TkDphhgZk6djnEfFN\nS+w5oMi8tdMMgidbHnRIx01AtNRYBhbAW+1BlVYNsYpTdmq3zFq45yGd40SV\n8jYOITlA63Mc6B5SBVppdns4erKgcopYxNhJWE9ay2UYYuelDtkKJWX1xMga\n63MFys4S7dZ7OjvS4sOt9lDQFXI0RvYrBP/g70JAeOspx8vDt5MrJBa4JoYw\nSazl3qVS+QphaFTaC3RWyXkDY00QbNKKBlI1eHuJHqdDlRZvkpfvZNyz3INS\ne1VJgADlzeOSPA+jRLPz1QR/7ICAVowSH9hKx82nVTtmB8IU9leSHY7xqrvv\n5dvcZPNsX9cP65Bx6CU5ouvKnIPtA27/YFBHMjae82NMR/iglgCKI6AsHhzZ\no4GmCHpztXk6DuIr7Xhj2bbB4dSoYP5fqr+/ppVC+j4qE7XLGpOSzIcylsEN\n0B7y3911+hQMiufB86vkdJA57Uc2TOfmDN7RLVUeUW7jgonvln9xJN1vSL8w\n9FxpkpgUDgZ/L/EoCKjg4Ne2s6mndBIvzEnvQyWZA2Ka/tduloR1kocRnaER\nmnoGEjDOAEAybxk17vfeK6mnJwoicaP4R2Wr23/6bXMyVMgnCxdDeC6TaeSA\nYaWgi8RfU3R4ar1yWNeRwgQ6qKTQ9cv1FpRnnUywRwc/TiYGLWb2b8Zqg9Vy\nhfKG\r\n=eIhj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDit+19MgrHDNmRHc9RVEcNH2ekEkm+q5Qld/ZPNGWDhgIgSprTlYuVO1YXL6wL9XFT3xp0bbCHWFk4lwwmSQBo+xU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.f35b2fd7.0_1618513855066_0.9882493121109772"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.11977cac.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.11977cac.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.11977cac.0","@material/mwc-tab":"0.21.0-canary.11977cac.0","@material/mwc-tab-scroller":"0.21.0-canary.11977cac.0","@material/tab":"=12.0.0-canary.3f342c3f4.0","@material/tab-bar":"=12.0.0-canary.3f342c3f4.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"30cf21833b011fd8946bd6853a20341579b79c96","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30cf21833b011fd8946bd6853a20341579b79c96/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.11977cac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+rD1KffS6oFeoaRfhoy+ho3fCdA1cbNFXuC9r3H7mtnKemGBMz1N8o3yc8cJZLbwIjvv9drJ378yEpNUEcJeEw==","shasum":"fc4e283a8c86ad0dc6097a9b91442515b258b04e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.11977cac.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeOE6CRA9TVsSAnZWagAAflAP/jI9IO5G1mNx96RiYtIu\nDChjQkklwd5+TkUNS3bugN/mK/10lPMX/F91r2DKx5b30AKOnaKswLIwRdnt\nh/xqlo6ba1uVY1tKtl4GTJIVDeN4mnqzZFpS1fmYGYpdKZbvlTpxpeYgFm2O\noMP9RCSSVYU3KUCbFrMcX2HdromrLMeYfQOsW/RNr1hwBz0QW1uWqZW2oeDY\no/wxT2r21Etnn5uPHd3eBQd07hcnbmb9/gfZhDKrg+oeATEPG7OsJBRF7EGb\n2LSnuvVL3MQ11U107gpRJr3Baymu/7AXl8+7ka5hhp6alwyHOS7eF9UQA9jJ\nWluiGvqvfYL//QqcUINuwgiVeSwKRwZ4p1o8qbY1w9x94Bra+JWMU6MjqGvw\nlfexUq9YRZDsrMJRl8k5Wnm4bWpxdzaaKpc3uh1Jw5hr0k2LgFNiMIpi0V4S\nHPwugpX3wzKEDuOw6BGQ2dLSKhaFkr5z10gnbFn/R4ilDUF2LM1RaZ4muIFd\nNIpW+iGkzDZ/Q240Ifohtob77hCKZ/t6CslAbUxNSRFoc0aR7biaFgtHYhbK\ncLmleyeLLOJAUhMXP563BaLO9xRB0CShJztEkCOFKx3YDUTUfKYjaTHdGU5m\nuPNaHtvA4Y2zBc5n0H1aeRNpmcrYksSChRl5nYbFv/Q2a+fwZSc5uBuhZ9BI\npD9+\r\n=79es\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSNlYkvijTUtprvAsjAgIFxDx1vUEFjUQUFU02zvOAbAIhAP4ZPPop6nS1+K1d8NiaW+ly1gH8UP5AJlquhCHRK6HN"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.11977cac.0_1618534714290_0.21750029813133698"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.018ff45e.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.018ff45e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.018ff45e.0","@material/mwc-tab":"0.21.0-canary.018ff45e.0","@material/mwc-tab-scroller":"0.21.0-canary.018ff45e.0","@material/tab":"=12.0.0-canary.cad489689.0","@material/tab-bar":"=12.0.0-canary.cad489689.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"4ac1a4ee2a06e36457a8412629422eeaa91183b6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac1a4ee2a06e36457a8412629422eeaa91183b6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.018ff45e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-j2KOA8CxImTCLy9BeJo5C40ZcRcM9vs8x06dEB/7KfIU6KG4LOq0F+U2PvVRdUyAMzCXjJBBYS9BpooEJRxn1w==","shasum":"c07f8188e8532ac949e6e67bc2f6a005495d77e0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.018ff45e.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggf36CRA9TVsSAnZWagAAiTgP+wbu7t8TY+KzMd3VssS6\nTWUpTsfCMRFzyJY1Tk0Gf0faisK9qZ84WlJ+ITquEiPhBlN7vMn7J44VeWy5\nMC8OIbr9AiYjNtx/MJis7zqsgU3+rDaQfssPfMAwUfqUKcamkpy0ujEAbRZt\nbnGcu1K98GXTJtLot4bqX4hY41COWmBqzv9toZWMY5qbzmliOa+/RfJBQ/kv\nEujNC4AcEXq6X2s7whjlRIz6mdgu+IDGs8xa+mL7PRyc9M+XBOc31HIQRBvi\n/uaop4UgJROEzLczVc79C0w31FLiC9W6adsnaUJ0dnjwf6Js5dR0gBbrGGML\nJXZUCJX3p7W1eap0iFlgzqJEucHePJwepj6O/8GMaAmt3vph7FfJ7KpAWjhO\nt69+a8I5nINbX9+BhFBq5lAHIMvf6P/2uUONYQse/uKjRmd5wPQs8w3i4DKK\nzJgpkQPc0p+de8neA96UlxNvux0XCao4NjeaKWTxtFU1sHt5g9yvBYT4uW9C\n+VxakJW6J1tezwGQj4AiZPOy+Wwes+ptS9WAL2syiUrT4CaHbky60x93AxWx\npMuR03JA8Cdp36JtMJrdOkZ4QV9y3RtwiCrE2x2qD6EGz7rubgwWefCF18Q2\najAnTXRvndb7Qo9EGEFsdhwss504/3ZmEGAavAFSGFIdL8094zClPoU2nmHR\ns7PA\r\n=et3x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG8scAk1dMBMSH5JvdCB91oNo60ydNDizux70DlDrdgMAiBs33XFkd+htamP6wvPimJ/KAB+ZZ1u6bLycwinbo8E3Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.018ff45e.0_1619131897863_0.674089333656998"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.c99d1fa5.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.c99d1fa5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.c99d1fa5.0","@material/mwc-tab":"0.21.0-canary.c99d1fa5.0","@material/mwc-tab-scroller":"0.21.0-canary.c99d1fa5.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/890b4e4cc8e4f275054b5ddf4b3554d0a36ad82c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.c99d1fa5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uMP714ARwEgGrnYSFsnX4/bN0BkETy/BdRy8/mwNahuEAUmZ1F77k6Z3T6Qdn3gGh+3XckKrkxjDaaOEw5yhGg==","shasum":"15307f24a7f9bf0850c9198148bec36ae0a10260","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.c99d1fa5.0.tgz","fileCount":13,"unpackedSize":46831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghxi/CRA9TVsSAnZWagAAsmIQAIP/pfYacxQAjERc4c/e\n4Cmla2s+BRP3+GlbwXosWqskKYPSFsWoelQgVz7SMytlkzUuDK11cFlu93On\n4nUPWfREcu93AE/HZfhOMQwpB92ONQ4ULwOIC2at9S4ctzUuF/Zd2UKhC1Pb\n3ZIh4jGzeY5f2OWxc+Y6vK4dQJBxalunISEea3ZNU9L0rAUXjves+kGY7dK+\nL0+V130OlUsZHMMGOhUoQkXWIjdLja/6nvhvU/snvYtyda6noea6+GQt2b/C\n8qdipnlpHGW84TOkX2h44NVABbhSu5MGQaGiJ8Sv5Z8TIKcemQYn6V4In5Ge\nQ4qmtzc04u+KJFCbPAuV1qwFJpkiDbdLCLAv1EIHCnejubBrT4D+pwnuGQtS\ngNYiyS3JWvUIXIYMb1s0E2TT6WUMs+ZcWG8u5XfyOQZ4DvadHIAEhxxc6qHQ\n6P7ZjUbPdOb9pndAUYQmPgoKL5GBOOVaJuYPZrPMNFZZlTLB6FbOFgJ//ejW\nQj3LEyKnuOaafOt0WNQUzb6tqIAEaDFVcENMI9IwvXqR1MAA8BjlSU4GALgj\nd1ADqsjaDJNuGzd8T5aTuuAVBTSfhoSDR6lQkZ6wX1/zZ0qXbdGslo/05hAA\n6BBUj+YhJ1I9SzDdLAbFZ0pD4gIz1NxRD5eqiNtK9wHkLm9byeEhA6C2QYiq\n+yVi\r\n=Tt2t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICe17AY13WmW4HsWCh7j6uEi6jYQCocn+iFWs+xXlwOOAiEAk+NolJ0chch7n5tX7e9QjDp7BETSwxU3yg1bhjkHoOU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.c99d1fa5.0_1619466430766_0.7351264720886779"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.eea9b304.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.eea9b304.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.eea9b304.0","@material/mwc-tab":"0.21.0-canary.eea9b304.0","@material/mwc-tab-scroller":"0.21.0-canary.eea9b304.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"5446efe110704f4464931aec816f98b15640db03","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5446efe110704f4464931aec816f98b15640db03/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.eea9b304.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-McM6POMuCwFaQprVy9KiVNqZPYuikL3adMgf5Pgzimlc7u0119aNcJ7M9Fp8RO+gs1EJzleclEm57IvvS629TQ==","shasum":"75314d93f342b0b91a4ec64ca05f1c18657fba7a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.eea9b304.0.tgz","fileCount":13,"unpackedSize":47049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiJX5CRA9TVsSAnZWagAA/wYP/3kT/FTdp2sLZw47bntt\nRc87HcYYA7WVo2sYfdhbF7qPLqrk9ohQbAVyU6gAY0cYBJBbQ2DKV5me/TD4\nK0sSR+heNmkgwJTuIDelap+H7LGxIhcn0DKq1Q3yiQ6toKQXL9IfKYPMSP9l\nUdo2+5m7TeB5zjGFfOW57B3L92jv47BxkulTC2yUID8KHd0WeFZKFymlpqV8\n8T4CjpALZ2Lo6DU6fxhdQq/uhnX7yRai1xFoTABMrorMiJoAXCreiihY96r8\nK0aty7GDbvfzXenMtRU6R47ljIFWeK/tYc2Cda6o/zdEnuoQgoDFtwzc92ri\neNzPb+nmPilzO7byXiwEo44gpiM6xoG2katr9L/TaBs37m7kkFxEyMy/LP4B\nGE4VlbWE+repVXYwp7Xt/fYA/qZ0YDrY53SyXmP0t/kHZ3oP+M1medOgZSmx\nuHmA7ljSTNTeSWII/YY1SSzPgmvEgO8iNRwfVFV/KK0p6fHci0alWa6Fm8yO\nSaFiVCFYjac9uWN2d2AKfj2XY7O17R3E5+kjmptAMCUZLIpm5/n+wROuXJmt\nT+fE3+fsiErELQeDeAp998xrFR3sMq60Ci7B5pgWNKT/ervkZ4wnTRNN0/+o\nL1FBzQYfmCIM7+K1HC4DuBtVmQKOlVjo382Fq/V+XIVPhAK9uDR1HLbTgN0Y\nQuc7\r\n=VnXp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDiljijrP4eMGYdKBTUXbRg37fMA80LQU2Bctvo3y3jvAiEA5uDxywSsY8FWg3SbEcX70VSwEoI4BP8imqrpV+BBoik="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.eea9b304.0_1619564025534_0.7206533931974912"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.5dd85d0c.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.5dd85d0c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.5dd85d0c.0","@material/mwc-tab":"0.21.0-canary.5dd85d0c.0","@material/mwc-tab-scroller":"0.21.0-canary.5dd85d0c.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"^2.3.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"87fa4ee3a285fecb598e3c37e03178de68d79f7d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/87fa4ee3a285fecb598e3c37e03178de68d79f7d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.5dd85d0c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0Bvt+qyiwPupQUFQlfH1l4fhdMR9ij/SuplBor+jnjeWYHLNRMcapsqcy/uRA7zFNO9ddxWtK3LwFFfO62/mfw==","shasum":"60c5f0965aae8cf42f27f7d9d5a6e39e82d15d2f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.5dd85d0c.0.tgz","fileCount":13,"unpackedSize":47049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKfaCRA9TVsSAnZWagAA8h8P/14FBkdZtQVWThLMfaJ/\n3Wo+vwbSw9X64ZxyIasellKuiKuK3v6LQMvZA3G66XyfFYeQIy22lbFuZOS4\nbZxUeYZMzGMVDq4JJ5ei48vRuJp9pjJaUOo4kh/z509aF1qMN8kxbMp1xrd5\nFsJJ3UdaOhJnCYUCDMokbXL1dFVGGXjj6b+QMhCM5EtL3TOg92iLU/5E8+H/\n5E803vO8fwG7SnO/j3nes1df35G+9LQXm9Uc6P7f6w96L1EyRVTppyCNOa2r\nEbFW2n4Z5ZVwLvkrFXcBfdvV3oGPapty9A2S7XTVNKdkB63MeB2xFfgbl6ab\nLJvH6FLhVowWul3qTzaN1JonCsWbItJJrlVpLB5bVwF/eVhNZWuAFVFyqR+r\nHj3L2sS03ik7nBHAY7SjkW483TdZm0G6QebWwhttAL2hasr5ZRRCa/kOjbzO\nEeZcajZE8RGbeP8vIkN66GI/Vkq1hXohRi1H/dvg76aIOV/d2aXFnTN2qINb\nGYnsko0eelCpPGTlKYtXTjJvGxpB2j6MF5N1ADrIhsxycv3g9S+Ct8284Vui\nVSzy1katlZqUOKbnn4xE3gjQZgQK2Z9zRmoxWX7JW7qB37ukTSUWM/dq372D\nqigG2mbX79wykn71jyG3e1zvQHp7g7Kstza2NVG2XtzWuN98IewitFPFtbNy\naYJP\r\n=O8t4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCP6wEANdPs8Z2keCTIv2VrvTGiERCYmZzUIVX/oMxGoAIga6ucCXcf3bfqYdcBMJhpvO/yMwT/BOIQuhH6PuxhMt8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.5dd85d0c.0_1619568602335_0.03309822746754931"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.cc813cff.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.cc813cff.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.cc813cff.0","@material/mwc-tab":"0.21.0-canary.cc813cff.0","@material/mwc-tab-scroller":"0.21.0-canary.cc813cff.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"2505c49d16e9b978469aef456cb53e6d6b265758","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2505c49d16e9b978469aef456cb53e6d6b265758/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.cc813cff.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oaaLIJUwEanWiOOy0hSg4oO8B+2IPKU90zDdO6FgCl4B6oZWWKroIRMuN3ZpKK0cAvAbCeB9s9wyJoxtM3Ab+Q==","shasum":"64787b505837a32a9e69a133cce5881284b68277","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.cc813cff.0.tgz","fileCount":13,"unpackedSize":47049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHR4CRA9TVsSAnZWagAARvMP/0siUUIyn0qI1nguEHhj\nXtJ4JtxP91o6VtGUkj+NEWmk8oQEMfj2jEiGNEZfVX+vSVVDMJXYB1xtx6vW\nsmVOaUpsjBhIkawXyzcZVqkmUQ9cejxef8rEfJBaVNUCp16V/CZYugf3Ibj9\ntCieQ5LdmWzyhSH4/TNwFWELhYfV1oWyXjevbz5Y5WhpMyAwufPJRVJz4QU7\nWXDBYZ+jljrwBtlz68EkSf1/UxH7DJBMzW5ZXiQXbJAqXrsWjmsUyguHbLj5\n1Rr2YGgQ3GdICjZQqwRM5j6wDvdFnxx4AdVcXTrZKkHcVNSYCApVE/HdWEk8\nP5WYwJ712jdFiqRh5pa3WYc5jHA8GBVQPlELrMZbN+gEXGvKVzaNbr3Iu5N5\njAfEt7IUY7mqKOeQPAT4pezupf2koZ9ngteBJepyR7ICItme7QnHc5k6AdCL\nlzCh/EPVkDwsVWYUxyZFDeNtSkfpcewDWmttSRS3XLMYrvKLIe+MYPOzK2Vi\nWWn3ul6LRrB+ITSItvUv+HMFHzNNiiScT8Q6wzBgN8wF3UgeGqw7t397GZU0\nsNzBp6sFKUjgit1mEt/VZmed1UbAthadHHGJSx0RzPiEXnWIeji4+aGmbXWb\nxr6v0A/SGph9Zm1ri17XkJ2aUmzmSXfwS1dqNbFPqhXTg48uJUXRDHcCY3sa\nIyDH\r\n=Ehdb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIADrXDUFlIKNKmScEGf9bTOwPmD/kZxFdypm48jAQ1jMAiBpWAII1cGRd1goEGxUXE69xwq2YtYi9KA0JegViFlRbg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.cc813cff.0_1619817591949_0.028190890594587792"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0-canary.0875e898.0":{"name":"@material/mwc-tab-bar","version":"0.21.0-canary.0875e898.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.21.0-canary.0875e898.0","@material/mwc-tab":"0.21.0-canary.0875e898.0","@material/mwc-tab-scroller":"0.21.0-canary.0875e898.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d5ea3c745b8a267546c8a9f9ff3e491bd41a8f2e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.21.0-canary.0875e898.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-AwI7tNt0wUqmeuZA3S+B4opzz5SZSntpd3/bvY20lEcrMywO6Cwm39PIVgsyW22BhEAW7BIzVh1sP959wfw2Jw==","shasum":"26720708214811afd8135ca6490877b43d27e005","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0-canary.0875e898.0.tgz","fileCount":13,"unpackedSize":47049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjHZjCRA9TVsSAnZWagAAtFgP+wUkupc+OzcviPVfPyfX\n73DxqPj5pR5A3JL86CYtD7s5JPBIF5t3pVq1DQY+VbnLGSiqUSMNSZvopI69\nF/WskUU3F6FaHtU2GZk0i5zh+KpbSb2UQCPvu+FMAiw1fZp1q57aSbmlJqY9\n46YHWAWW9+2LQwoDtlvig+wqksDxB1EMy7HJOMjoMqLB9O5276MjrIw2RssW\nANLyOw1aEa/Z3gctDDM+gollcSh3B0CEMxRGdsEAuwUAnSw42/mtpPnZW04u\nPZPh+PMKLapm5zRStD0RUxiLqB3/24BeB6tHM4rq3RSUKY8q135DjY3L8fQh\nf4c4XkqUKjeRplKp0gYopRR0XLR6R599xm0SHk7yJKR8NC81a8ud3qbi7ZT8\nXjEI0PN/VkF6DXUwXqmCTACHe6fflt1KArh4t7Ry0I3dSsfrN0cc89JRBfCn\nn6qbZDu3HH9orh++TouERKtRaZNxXZlh4BhumE7dvElJRRVF0NxyYhrpWG/O\nz52D8WLTBok3hFBfmbEfB4Sp0VpHbad29e4A7SUQgHVgUAE4VfFT+n9Euq10\nIcB8Eny5RwhqJIGak+CzkLXMk/uHdjr3qohd1n6iL6fZeq40V0DT0TmTL79f\nNB0pJqr+Kpv1f8gCf9h5HgZW3nootf5kJNAdekRfxwdmHIpPh+uTMehPmMvd\nqm9v\r\n=Z8IU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0YAHQ38Y3lrHEg755CqPxXbZ9oXKzoJwXLaGmtA2FZwIgE6z5/MavSDx5mDnefuoeJ3VSgOThJ+RkL5OyDOiD7cg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.21.0-canary.0875e898.0_1619818082614_0.6676526878312719"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.21.0":{"name":"@material/mwc-tab-bar","version":"0.21.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.21.0","@material/mwc-tab":"^0.21.0","@material/mwc-tab-scroller":"^0.21.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"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-bar@0.21.0","_nodeVersion":"12.21.0","_npmVersion":"lerna/3.22.1/node@v12.21.0+x64 (linux)","dist":{"integrity":"sha512-0V7vIsmbVJ8jg5LN3GxD/Q82U8UOZOMxPwzQLWbr4LDVEauNpN5a9JBq8LvcA8ge6xsSyAtfGfFk2OWIYbVypw==","shasum":"7a6f6c868fb898edb434a64be5504effe93f1986","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.21.0.tgz","fileCount":13,"unpackedSize":46980,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJmaCRA9TVsSAnZWagAAtT4P/10ZgeWYVZ1QTuf7eWIB\n7K8GJvURFcknUXsrI0VDci1zhc1Kf0PDRitw6ccEJnqJNaPSbhhm+z7xDbKh\nnlMLSDN8f0mCyjEoXOKd0WMaqJwMwy6yckXaHqf4D9CpGeEGO+CCS3fGG8b2\nxqeVGcEF/Bl3qYDHozWibA0NGEsfve7LqAvxpsdxFR9QasEUyOaM9nnD533b\nYzsz5nXF8sfnAeG9tzN0JKBI/AvWWWl55+XXYmEVGHVCCTAkWUoB5Rj1XdS2\nu1FZ3+XoOZemRj86nrUwhDHMQ3TnZ39yQsmQkD5G7THVL5zuyANpfN6qrDZi\nc6XEJpioHtvLfNiK7WGScQRpkGhh3vhCKLfBJQQHijpxq/rhavVYsvdx7CIJ\ny5uLffkZJQ+NS4IUYykjJAW2oXCI5HDsknbRCJprTYIE4D7IVrHRp2QXwECl\numaTdTzt3P6sXOqvSRODnUaD/odGZSFczm2GU2C09C10Op14v02dWhSyceui\nNOQYyypVM0cW0mW1VmPckf4VkmSQHoC+EjnXUg+jJLQzKQUiv+ourw/joBfM\njf/3cvzXuPsIHbRuGYQSEdTgEeCYV+KZYuUPcOiDDbl5Tm/Pd1BvDTs5ySGD\nc7GYvpZVvR/4rMVkr8m8XXw00MxDlsW2N9l5xxZFUKzSpNUcsnY5sP92EEjy\nxCXV\r\n=Jl1c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDP0EkaeYLowVfEo2lp+bCiRtq9rGwuqLcpkBI35mt0xQIgI6hWuzKpQhbl8iVOW/lNkn6GyNRMmuk82PGJtLom6RA="}]},"_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-bar_0.21.0_1619827097668_0.3867865430919242"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8f1e7e1b.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.8f1e7e1b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8f1e7e1b.0","@material/mwc-tab":"0.22.0-canary.8f1e7e1b.0","@material/mwc-tab-scroller":"0.22.0-canary.8f1e7e1b.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"346f8ec243ae13b28796324e6408721377829b39","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/346f8ec243ae13b28796324e6408721377829b39/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.8f1e7e1b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gRWbNxt1ordnIKinPtolgC3mGOVT71uz7jxZnXAH+YP7GAkPfPoRY8l/GLXcpWUoKguM/AtTRxA4Gg8jtZM3Hw==","shasum":"eab564befc4d0cd9550f19dc37e7f99530dc064b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.8f1e7e1b.0.tgz","fileCount":13,"unpackedSize":47049,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjJtgCRA9TVsSAnZWagAAbekP/iEWloKWcD1SW3wKTlQF\nsLYSAT36XBPvQBw5YkFjH6432foYqiHfionoUWeJUfyMHpAXj5mcoM2zphkO\nv5TNT4P+RMHd7taqg+QQJOup/RXkxcfge27X8t08WukYykDvrh418yAsqyuR\nfaEv4Bh+RKjrldEINnF0zoYfI5mM/iVfv5woOcdkk2jcI97Ueztj0ELiAaUy\nKjEsESEr9/rzuKdTYlXORdQq25PC8G5Ug0a+doM9qvYRuwu8FclgxUZKiJOR\n4UDV1TEYKIRifWbOrcItY0XuCuEg3Y4d5/ARm0l7qtaTIQgfOEiTdZLQ9FJ8\nM4XixzkxR6oX1ADxnOesF5kc3dY4CjcMkkrL8xLZ9Epkz0vmZtz6cOIAQClB\nul2nr26sXsG2vdSAG9gTlqOFLxx7cK/5TSHNv2JvQFfxVoVhT/NaRWrgWgs3\nJ5AtHl+jfc7Z4bCapqEB8OIcmoxr/6s9XLNkVmYGEuH4YWLo+SBrWHMgYukd\npw8B7VDrABdWfLi2iAdfyvtzqvP785S+Kvyi/oeXpghOT6TtLCrj8cj6ypG9\nIJAoZlCVLv31MNTXraxo7dyKaJPbewQrd8CPzphUj/BF7s2UB8VE4IrwHxCM\ni0wy9Q9M/v+NoXaE/1qi1GWYtfBr3erOCcsYDaa8isjOMcStrL8tvdD8WxRG\nFMZP\r\n=slgT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDvXTMq2HG1zqMrA4qqiu51DLo/u4iIgOwVNEUwBqJbcgIgZjrBJ4zV1qt8U4B391nJHvFbkD/pdDqWly5k7u3boXo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.8f1e7e1b.0_1619827551754_0.9280676293795553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.deb0e792.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.deb0e792.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.deb0e792.0","@material/mwc-tab":"0.22.0-canary.deb0e792.0","@material/mwc-tab-scroller":"0.22.0-canary.deb0e792.0","@material/tab":"=12.0.0-canary.197f64fa2.0","@material/tab-bar":"=12.0.0-canary.197f64fa2.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"7b8ce494b86ceb69e799a5ec1a9f0148075d04be","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7b8ce494b86ceb69e799a5ec1a9f0148075d04be/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.deb0e792.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-oLZ7cA/zinctWUIdSd2BzGqcDXHo3RAdH6X0ffTGAQ3eZT4MItisfh4mXw+/SytFgxZOCGuWxz7HYEguW0fkWQ==","shasum":"2136f22e109e234960f8269a487e9c60027fa508","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.deb0e792.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkGx3CRA9TVsSAnZWagAAmPMP/jKs591rt7eXUs+JPJZF\nF/IXdE+eZrslWTAD45EheYD9rlAbQEyqBSgvyrfKKujD+eQCBjUdn77SPIIA\nmYqGoScZhA9a+FZJLeDSb8Kb2TvfsGGSR/RMhiTH6ZyagJZbTqyUW+4DXrah\nMBgb0b6AK0cQxR+zK9US+Ei7w22b8q2w7tGC2sWTH9B1n0VosKjLNlj8CHs0\nT8XKCBlBLL5mrbN9rNTRgTVyNWN/RH4hsIxv+qpyPF+7jns5tV4dz4ss4lpO\n8MyCAM+5ofhxkZhiOraQOVYv3+TDzihjtj6/yMoLwewCPAb0TqIT6iPMky+f\nsvRCcZW2WCp9HcDdt8AGnsXMqRi39Vd60OG9n5zO14ZIKht570UOfqGUuoZm\nkdl9H/I3zVGCDHc0c1ZrDpJs+BrjOmF+jKEG6P24b5lAu88m1CgnedaFPCEx\nF0QnMKVSg89XdUu1YCF9h+1PnbtZaZYExG9AtpcZ/fgh3hceEnx10azsIxnE\nHFPVsyu5qamSgTxZQ9iThRnxtNviiUiR5B1QoBLZDaYlOaF0pCLsTLikAcal\nEz++FAoIcT6gZBzKGcYrvE8hOlyTnXv3MgliM9Go69c47+a7vNN0EyrK3V44\nEdM1RRapya+CqsAhrcX2yK9clJE1Cv+nd8Rm87s8uNPZ8z56A4GREsXfLEB3\nVA6F\r\n=GSBw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZqZeb/LV1a+E9sbloZArdCZrOc77J1yf8LpQOCJt61QIhAOqIQ/e8Z9so+z285jf6yKK3st7o3DSlpy7LdQY35SSy"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.deb0e792.0_1620077686930_0.7536379497357626"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a3ff615f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.a3ff615f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a3ff615f.0","@material/mwc-tab":"0.22.0-canary.a3ff615f.0","@material/mwc-tab-scroller":"0.22.0-canary.a3ff615f.0","@material/tab":"=12.0.0-canary.474836ad0.0","@material/tab-bar":"=12.0.0-canary.474836ad0.0","lit-element":"~2.4.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.1.2"},"publishConfig":{"access":"public"},"gitHead":"1e819eb3a7930649e9ccc58d69e42d7d17e022ea","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1e819eb3a7930649e9ccc58d69e42d7d17e022ea/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.a3ff615f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vrNyAUDAuxh/uoD8TGHBsmuZ+afPjXrn8DQHkVuWmYmmiJa6a+MKNYS+DFqNLe5MtMHelIw1eUEB43H7QexbJw==","shasum":"f887e54c27dcc8c0bc99b877dae959391c46aab5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.a3ff615f.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHpkCRA9TVsSAnZWagAAg4wQAIuI5ykKNN+xhKrKBffE\nHPCZR9YJJrq6CxqP7mdZGFbuF92UR7n612n2Nb6H1cEQNLRQ3BTwPqdnroF/\nf2L691FvVYoJ4KvraESQ0Bh5wUhi7FKCAfSiCMQZ/bx5KxnRw4x1w6Lnmfkc\nRPfdGe/6WfO1lHxYm4oWL1pfEiDf/6OambOOz7KKSM0Sp+8usf3rM5TQm3vt\nILVL2D7tPzTrqNx6DBLRk+xLCu4Dz1P9sVoOfWiaS827JQuWcW8xQ2G+gVVF\nt7DGfBQoTlsmuMzbIGaQyat7NtSrBh+c9XtSYni+Rj7EhoYpcJS3Qp7Zqnf+\ny5kXzcWd7RH8fiQUN6/LHvCjq1gyu2MYlrrwLofgeLNL03rjfp+WS+e2sKLd\nsMtcltLY3DA+qAlCqF97MYX1ie8VPKe0GAUmiGezUrLk95+fNW5uxH5yeBCn\nNQd69HM6RhGw/gaNx57Gy/TBAZjbWo/9sU6E7mQaaKEVHFuh3/wW0ChsNTns\n69BKOfTk7I2gXP3E58lgpMLGzIyFfdZCVHnGdUgXZKPA3kFlxVg2LkOeT1gS\nod6RYwSG8HmoWsEguVFznFUbkV5hCG/PuuSibdunGUcjIHiDknXS0bix7nFO\nd2wyubHw012qVeNCzrwJk9emkmMhlEAtBqBfwJSEQn1BDm3kzHGAf1l7u36T\nZCl1\r\n=BKgI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCXPBMlVG6yvUt7kbkh9vaYLMDv7pdK01HU1XOa0kprdgIgVoU6N81IJI0JUEwra4VdBRlJ6Rzlx+TGidMwj6ZSlyA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.a3ff615f.0_1620081252145_0.16568559741435962"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.948ccfb5.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.948ccfb5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.948ccfb5.0","@material/mwc-tab":"0.22.0-canary.948ccfb5.0","@material/mwc-tab-scroller":"0.22.0-canary.948ccfb5.0","@material/tab":"=12.0.0-canary.474836ad0.0","@material/tab-bar":"=12.0.0-canary.474836ad0.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1dd7576742ede6b9f763d391eaebd31ce501ea16","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1dd7576742ede6b9f763d391eaebd31ce501ea16/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.948ccfb5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Zfxf71FmbzI8qmdDSDbfHYOaCmAATng9lPGxEPj+lsTfq0jDF/ArMluYy2CxYZWdMZHB0A10ZcVpXmbVLaGZcQ==","shasum":"7c8a14e8b47457240f2038aae4d52fcb4e313a5c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.948ccfb5.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkJEhCRA9TVsSAnZWagAApoAP/0yzJc2z9Yp4heV1jf4t\nteA7UHFTd5z7MX7xRNYI28noAGUSsn2uCH8JVCoOp1PBlS/s9CUI0oVX4tyx\nMFe1PudiflKE25cO32aPA2aGEK/cXyTRT9ieCjFnaCDGZiuiCdJaoaKDlclz\nwE/zikxZ3Wk5fBwnSf+l+J6AgBu6UupIA6/0u5aEfA+JPj6dLBR3IJnwupc+\nOa4qNugc7uD9/T5pdWjBaUz92e1R6OgMMsPlEOlBma/TK50oUF3omTK8Dp0T\n+DpyrzSKciYXueb5yjX1rNN7I6FZFasoEVX3obkuuX/ebJJ1ZufmtDDjT3BD\nSCWlShHTHzLQFl37T+Kt0SXmZwxmnx1MM+CAXhgSbNRwPfCaha8+xn+iYFE7\nXYJERSAMbFioAK+xPTY4flNsBoiOm2Gl2RvTvXE0v/sO7D92pEGvWlQ9GWzq\n/DZX6zdn1qlA+q7hg4Oh1fIUR/oHh7RBnIM0YRzgIOmcf7xkNLros3gT3ReJ\ntAIFShTzM9Llc5W3a2smP1sUVDFCIrzU4PdPHYHuPnW7Zx4MBhDJ7t89pq4D\nqYHx93n9I0XZktcSM7oh821cW1w5zc851uqBwbcJIei+G2ii28bRasT1nn0j\nW2A0ldBhgVDS3jhVvshdBVWuYanxcFoLUJuyK8KZH68JeBFaqrRbR90DqQVn\nX4uz\r\n=B8uz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAhL9laGEiWjDJ4BIVzKsYDTeAIw+eE+jyAsfL1VP7eTAiEAiDXRhTlDCXXF9nKPb/6ScMOPLazUnr9+zvoNtnopR4s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.948ccfb5.0_1620087072628_0.25482917026742946"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.9f8337d7.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.9f8337d7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.9f8337d7.0","@material/mwc-tab":"0.22.0-canary.9f8337d7.0","@material/mwc-tab-scroller":"0.22.0-canary.9f8337d7.0","@material/tab":"=12.0.0-canary.be999eb08.0","@material/tab-bar":"=12.0.0-canary.be999eb08.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"c25dd9ae2c04ae380f41705f23786ddbcbe29456","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c25dd9ae2c04ae380f41705f23786ddbcbe29456/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.9f8337d7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kwWtmR2c47UTtzSwGHFYWIpL7uuKp78iCQ9uvsUtMCJwpQmcApNrXimXOuXv3lw5ccmEIsmE4juaeXUdxziQug==","shasum":"ce0c076e0a85d5e711d8ce612a93a38b16a33ace","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.9f8337d7.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZRqCRA9TVsSAnZWagAAGc0P/AiHjfjlgJtzlGl2NAq9\n4K9YINYRTR5GPitOHa7v78U4nf8i+rp6D27o9NHr4y5atuXKITZSOTF3fSQC\nZhfVIWiRRqE/6bJn+jDKusoYLJDxvnVotokGwkQKT2iZmc8cNlU1dPsMfyXZ\nxCxrw3Rf17eVpFoB9wNuAWjy07mbXljNL5O0N10IavAPDcH2UnvAqymHTIYw\nF1vQSXtsJpGvbzcFO8tDw1+9WIq27unei2UUY6fmA4BAPdEo1VOIqt0QFaNP\nXGOBaXyM9VJpM5UjVxERHq7bN12cCsUAqZT4Cc5jxa80Fmunp9lM0SmGCnF3\nsavPa+pCjcGlqt37V4+vLj4NRprDu571vfT8zDW/cp9NOykj3cqTVxr0Jii5\nYlKw9ivqX+oOCMFjJLuVqkg/WUuHGbk5dGM+ge3JF6NQ/T+EPMVMw0soK1md\n7rcbAvqNuqBe/EO/T/jLYFz+8vw47/BHSIcjdfQfDFfljFUT3EwhUQNap7vs\nXXG2pXPWH8eJEc/vEMw8h1OUKZZI/L2/Y9OXZOVfhCvuof7Iv71BIjKlbxc0\nBDTNxv7jKU+C7R0hSjV8dAR3NP/8AumidsCPDXmn9yKzRTXnc6/jQ1/jYmTQ\nf/xxvtHNy1SAJeBcos2Cu0fHYxfBiULUbMJyZp9vZ04Op4TQnxVF5WrtZ04h\niym7\r\n=CmP3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnKgoTSZuVxT92Fu2BCTU6woapeVuIFC1ht3oZg6yu+gIgfoAzc8PcnEkxTuH2QnD/c2TegN48mQzdsaCAn3HQ9KQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.9f8337d7.0_1620153450328_0.3650512263532737"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.5813480a.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.5813480a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.5813480a.0","@material/mwc-tab":"0.22.0-canary.5813480a.0","@material/mwc-tab-scroller":"0.22.0-canary.5813480a.0","@material/tab":"=12.0.0-canary.055d4f10a.0","@material/tab-bar":"=12.0.0-canary.055d4f10a.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"293298dc0704d114f85fd245f98ee8f21a3ea348","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/293298dc0704d114f85fd245f98ee8f21a3ea348/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.5813480a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0Wo+xnp31VRTFgHEXYaCm4mvE/u0lJ2nX3/y3qSc+L/dtfEEWrcs6Ljdd97zmGBCJS/QdBNbe4aM3O3aNVbYgA==","shasum":"68006f616c7eef492352edeb1129598f63c3bffd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.5813480a.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkuM4CRA9TVsSAnZWagAA1YgP/iadpcdkbGu7/UG25YAo\n8oHzS0j72h6o41ThrVo0GHqVjhj2SiEq9b5TzK+uPjTs7xMA98/7jMgD1EMp\nVM8rlioNnAtW19H6ejOymnEy/FBE3KvAbygIqyPmKnCrXI5asAb6HIvnMDHO\n7RpqVFGpMhXrJeT0zfTT2S8CwfYtRAndKnDrJlq0fsw0E9HevTLWlv1cyzBv\n/rub9D2LkpZ6XrE9PjRK3zeegXGHKSYrlCJmhZbyuUOhfgqrjt75EHFTPkFD\n89CFfzGRLGBpmH66nT9vZu0ZkL3LYBLxmYPAbHvNhsr6L8AkvBmwKzxXKiUu\n+ffL8vdE6Eo4fqT8Pww69ag69cXP5aHQt4g7y3v9ykwxd50VKJUKjU71BTmv\nICpRtFj+j9LaSu8dx3TpuwO/r3XN8oErdkVkr1RfiT1wTg6jq+cbtmZIdL/3\nJUoYmb4M95AVqrcwKbjRQWWN9sTPyAvBONa6Qj4GMsa0UCkldLx13kZ/hX+n\nZyNI6Twi58nTilxVsNplLZHNMlKOxbyX/yGozm7VXMpQnilXNt36ElfMqToe\nG/BAwC6CX60kwsZ4wGuieKyJ/XLJlRzzuSMqHgfWlWT8BsHCOpr1HiRsplQM\nLKBUag/q6wMnSh/XMXn4+pn31ERvrAK5WJU+nd4JuhhCyuYskNDkPv4gJOzT\nsI+T\r\n=HwYX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj5WCQ5i5vD26yErnnTmhS4j8lokG/UlOrpZ82hKpXpAIgdvDpva1RRyWvNLOPshWfzA80dV8ImRCUwdzkrE2xa6E="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.5813480a.0_1620239159842_0.12641478022467711"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ab7fc1bf.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.ab7fc1bf.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ab7fc1bf.0","@material/mwc-tab":"0.22.0-canary.ab7fc1bf.0","@material/mwc-tab-scroller":"0.22.0-canary.ab7fc1bf.0","@material/tab":"=12.0.0-canary.03f525f9f.0","@material/tab-bar":"=12.0.0-canary.03f525f9f.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"9aaddda989be6b623f728abc86d48adf169d6f69","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9aaddda989be6b623f728abc86d48adf169d6f69/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.ab7fc1bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N7f8KMxACRWir768U6FKVxpJaRgbMwnuMkaknWAI9Eqpg9VXq7MbFNBbcl4J2C9OogDihULVyTF2R+fBtSZTRQ==","shasum":"9bc9c25bc69f4b899d014d6e9859117966d49d2b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.ab7fc1bf.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglC6iCRA9TVsSAnZWagAA62EP/iAK1n8XFlW+C7SMI1UA\nofj7lQt/G/20qu4eKTRU5900QZDahnqk7YT1qq53uTZUiwn4SoWThmYS5QNF\n0MRKgZjyvlx3MDTnLHgBwCnaKASEmdO+jRMbV6/WDqB+uecVwMpS6yUaTOSf\n6CBdd8FRdfi2qgE0For9vb2y7jfcpqI67gKblq3ZsSkfsG5AzPP4raOajDf3\npPlBSbCRmW8q8eJJwdBa14BxQ2P6dzEu8ge72chNdvCL6GA/0R///Ud1g+lM\n4NhJsOXnPIbbIIFe2hAKg9ILkeuHoOhH/0Z81RJvHzKEH8pb//zgKblUaaxe\nHj2eXfzUixjAlTGjA74txHNBiHkzHZDfv2v/RXGf64MPpLz2C12k6RatiB/Q\n64mVpQMEudEINm8J0itl5n50IqNTuN1mrPca8VtmJpnZEEKQX3JhydLfGNJ9\n/KZxZu2YJ9iGSPd5IXSpCO+/jgnc12ILyyngeM7Fa46qDpRB2tt0rflOyk2Q\n5gyZVrcDabhmHGkJhwcY5TC1dHc5Z/ADp7Vwp9RpZ6eXVLNriEb4CwoVYkdB\nbxv0udXWxsOR6R1bEd186YgD3cVionttvpyll/HRATgSk94NQABnJFTfYeeR\nv9LywhUTImwdFIWZDXIyCsXm3wpjAc/8mtZX6eb5IdrwoeBhCJQW/3Pn5X+r\n8BxM\r\n=j+tu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDTVFYHdD3O1jDjoNajacWWEkKHp8EDPRtJpq/GWvwpaAiBEKjpbScFjtbStYFctWwqpg8aHqPwST0kZsZfV4dqcVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.ab7fc1bf.0_1620324001414_0.3818486985202687"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.25693d60.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.25693d60.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.25693d60.0","@material/mwc-tab":"0.22.0-canary.25693d60.0","@material/mwc-tab-scroller":"0.22.0-canary.25693d60.0","@material/tab":"=12.0.0-canary.869d890d4.0","@material/tab-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"89015755bc4d93aab59cd46274331e3a6c467896","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/89015755bc4d93aab59cd46274331e3a6c467896/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.25693d60.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kwGb1DLDHkmv1fOEej7tAOL6kcGVAY8SbYdBpBk8WIXljA0VoZl/Ge3A53EUK4dHlBdk8tHoLCtMDl6Zf1fL3w==","shasum":"6288f07017ebc15007fb62fc31ed4d190910dc05","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.25693d60.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglbeZCRA9TVsSAnZWagAABisP/2ce+X8BJKisJxLIpw5F\nLg9LFKrbWAp6Im86COyLg/H9S4KoXMuoQxJgclssND1sgMbeB0vzHUEZt17P\nq76YPjb9OkxzuzNTdzC3AzaWyGJ1meWzW9Wg75WqXZcKyDA2UxYAzFik0udH\nx7ddqdghtKwFf1hk22w9xMhhgifeKjBXDDK31rajEH/myjC2JN0hSEKb+nFx\nzJbbehWBbDA0QMdXTxuvJ8WFxhyCLlQBBOj7JymScpjVS/MMOHpARZHPJUrw\n6gry+Wm1yC+kI5evErUYWekvIkyv/ZZXFoM+9EyFMrGDZEQJ04K0yEVQoeW1\n2U37yVrF1BJtpjaw+HWTxlU9EhQfq4YEwl0lVkGXa0e/4IcGpgR5v3QnkqHW\nkIbXSvrWkfH/OBa9ZhPn3hXG29Z8Ea5xZkJc0TcTOSkhM2Y9NH31ZLgGcxN9\nWz1+xCqEkplXms7NViEiCOUWYdHTvyP56LUAaHD5/S+Yoa+eNUUYFy5jlWL5\nvObMEUmcogdn9xUQMJTY57DfT5iPqNnbJTE10aWhIzPqm7dE6shzt0q4jJcd\n8l/oIyXed8xtFNO5JBAVH+UKLeSvQRhdpsgZFa01iHrSvsxe1TAg0P1xcU5d\nizNhdaEd70QCI8DOZZW9pbssugTGtCEcyuET4ynxgZi1/+xRZQyrKt0mC4Hd\nQMYE\r\n=LEUj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICRrwm8t8ak94nuAWXnkquDmILjv/hC6X7gHkW/p1y8KAiACinlQWq1hQ4l/rZtF9MIo3SAccB2SfsWaQcjpBoQqgg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.25693d60.0_1620424600734_0.041593080579240826"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c497962b.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.c497962b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c497962b.0","@material/mwc-tab":"0.22.0-canary.c497962b.0","@material/mwc-tab-scroller":"0.22.0-canary.c497962b.0","@material/tab":"=12.0.0-canary.869d890d4.0","@material/tab-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"be15d892a32bdf28e42617b44e38b301b0ea590c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be15d892a32bdf28e42617b44e38b301b0ea590c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.c497962b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NQeLAJ3c35aiTiKQmS59bfKkiFkSWSvZwDN5TPOgraSExiWIPIbKD1bjwnTlOChbMQnjmFD9ycVKjXxcQxjhjQ==","shasum":"9cd473b174b21a4a1336335de9bd72702ac719ff","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.c497962b.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb0rCRA9TVsSAnZWagAAgyMP/3WJt9bc3OJtCSYUf5e5\n11az1mkix6gx9fc9fkqsI0mKXEDhnCxx3iG64+FKQSNjJeTHTwpoMBq21AIu\nxhqnvwTHY8dU1U3tCJ8GkDnSj6ucgID/v+/TmkGuVtoPeMk05nzkqFjav6ij\n906yTQtbPzT7BV7YbS9b+FzV/T9itfeAhXxVGqARalniAVgAvNJq87MwG0k3\nORcuAjIL6uDALAv4vTHslqwxmMieya65YFxITvgqKSyd/64aNdcvBobo5nkd\nP8pXxJDGB0GJ66K0yat8Jex5DRSVdfwPHBnDuZTuZhXZRO69XACBqFF+yKkx\nMD9NOWtIt65bY3jMf+UpvV2Sm/9wvcTFRXw6l3O40AAdoe8D6bGVYLOXuyRy\nmBlkNkfLuH86EQUB1qeOQ075R6LyX30ZCphvA9kVcpv0BBOjq6ip8Qqpkee/\nE/gdUnNN3djs1G6Jx8BBhZXClp+HyG2S4zxNDSPipNM+9NoCcbK1yAw9zLzj\newopGz24L2eoZqEIAnwxNoLaAypHhoWziP6cJODFcnYyRSYEW9tRqbxSKCMI\nWurG2+2psQ6XEVGAOA0lBNHx2oa5bvY/ixosizKydSa2HPTG+i1u2TrFDC5E\nrCZsy1I6uAt9FM2d8CztaMnjoeSG0zHiWugG0nenHiP7MlPnsLNggUFbaZJB\ne5pg\r\n=+w/m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDQ3S/nw/Q0fd7DYxSBjS73g/xK7tQjLlGZLeuJE+GBvAIhANdoDrePu9m4PUsy+RLCT8uGtlx1ItAPJGdU4NRA6Zrb"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.c497962b.0_1620426026908_0.6928552498971492"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e300688e.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.e300688e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e300688e.0","@material/mwc-tab":"0.22.0-canary.e300688e.0","@material/mwc-tab-scroller":"0.22.0-canary.e300688e.0","@material/tab":"=12.0.0-canary.869d890d4.0","@material/tab-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"94ee5e4aa5987e14fc749785fef3b65b73185c74","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/94ee5e4aa5987e14fc749785fef3b65b73185c74/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.e300688e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3X81Jz5Kc7PE8CKLUmCQj0cHVDK9z5Or1QJj2IdrabvBfL+4voJ26pwQJu6VxMEJ0KCS6OXATKk+yB5yz/+4BA==","shasum":"82f01935eccc64fe7960e6b46caed72aa2ce5ffc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.e300688e.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglb41CRA9TVsSAnZWagAA9HMQAJ9IhpBXw7uPXTI3r2w4\nP3F/vMKH4di+zRAsiBR/m3vuj6EDMlqRuhFXL9FpQLtvJVxTE6NWPidqMDnz\ngH7lr3M8oRLKA9nA0AD1k7SnWEX0XmkeEklNA5sWATDtr6rxsu65Bh/TMScL\ndknHfqZhnWjcUhWV+w+hDv0BdKLTJlqrnDh5jTc7VBV7izSujVT5+xzrMKq+\nQKpyDzKLK/qPMluWhtZEj3TgRnxy7YUXEw5euv5Q1LlPEOu9qej25YTck+wi\nwaciu4plVlpb99d5ylBwqJlPXBj+6LAedyj09f6teDaPbuVmSjR6UknUsV/s\nKzCeKro8Bjgtjo/ypxAbhgJGU/fYp3ZXnpfBBxwih7+rpusGCj5akXm8bK36\nwLCK2MjFxfskNYr1AL5L1lJZaG/q3DKL0jaVWllNpalMDdlUaCxib1px8EZq\nXVU9z6jygtGkAw8Hap76XhMbKUrc+BCWqz+bB4y5nzM8ovdqbgNc6e9qfvCC\nbbEnts4Ra/17Qb6Wg6AD0y3eISx1UI0qzvGeaBfNPv3+jpuHi4Gv4o1s3PmB\nLwMAk/GgKJhiP1X1jkcIVaDUBhHhoX8Xua7Yp8JDe7krBUkrRycY3q/IS84M\nAFggX0kgREETZuJ46h/KRPA+Vop8+kx7VqTSRDuQpmyXYFqrGUDXgjHzYD0l\n2+/q\r\n=f2bH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBWb4wxtRKoJOMCMlVd8MjQWva4GxuffDNJlRzbcxMS7AiEA8+wsXS5DKVpSQClzcHlvdwsTk2uGkSFnC2qNeIyEy4g="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.e300688e.0_1620426293215_0.5669841829398894"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d70287f2.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.d70287f2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d70287f2.0","@material/mwc-tab":"0.22.0-canary.d70287f2.0","@material/mwc-tab-scroller":"0.22.0-canary.d70287f2.0","@material/tab":"=12.0.0-canary.869d890d4.0","@material/tab-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"17a229885fc92f311534b89a9df6549e9b78c204","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/17a229885fc92f311534b89a9df6549e9b78c204/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.d70287f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fpwz/zBuC4279uLnRVv17Z+S4MTe4BfDGDj1sQnRrOCkCLIPBJv5ij0g/VMOEg8qacd0v3J8qGAnj6S+M4ifrQ==","shasum":"d13a79b7500a99d285caa1fbe196be7b1bbb2d8a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.d70287f2.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmYmtCRA9TVsSAnZWagAA9aYP/28G6l3NgHy5E9O74CRb\nl5mQwPAkShR+jLKIges+o6QVI76SYvUleQeW7dnoAxgQ3vvNntvYTcnuRKlx\n6F1Grj2PjVPnc1motz+dOAfj/ybsz+qLY87ONTybSeQDr5leiDco4oP8m8qT\nztaO+3m9W+qIDTHRGzuDZtkBrK44pSHLrSCTQktsk11mtuJWWfY5yj4c4dHQ\npdVQXuGoZJEITUqI7pvStqzYQeSocbewDrxqEyDrQjLI/2GX6HXj87SChaNi\n86YYm6XaqCe1xBQFdIZTNUMprNXk3G6wSdFgHTv6I0gLQ7aH/TBRtouJv+Jv\nRyHCgvJEt1S9kCqhl12t3cYR0BkoO5uOcCbhClmYzPbEXHGOYsebI9vzdyRE\nvmSbQg3PfK6akzwSSdJje6WD3bCgkcNy95yc0pwAUCyxgXmLktUNa071fo6v\nSegocv7F5tWzYd3k1xfcBlcb5EjNOeBLCR05y8HuQf1E8vqDx37zppa4F2nv\nBaZBPFXE19P9XXudkqZi1rT1qv7KEY/AoQUGb374hMw60LQxHeJh+Hn+pT9f\n+SLRbcAcusuJVnPFYBVVcq6tfMybwjblXnRGwqsj/nHj+VXxqm0+6qqMokH4\n871o19eHU+k0xQ+dO7FxOvsbSYL9VqN6rvoZsmcwGBKH/dvCEaBmNSsxl0Fb\n3B9E\r\n=n3ja\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBFNCtD9arsipgpuZmclZ+aN2vCt7vDrmc46UL7pp2OKAiEA4GE973pQqrcEDI1vPwYFKXecSwaMT52h8+D3oDgW5is="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.d70287f2.0_1620674989360_0.3832531288932679"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.02e841b2.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.02e841b2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.02e841b2.0","@material/mwc-tab":"0.22.0-canary.02e841b2.0","@material/mwc-tab-scroller":"0.22.0-canary.02e841b2.0","@material/tab":"=12.0.0-canary.869d890d4.0","@material/tab-bar":"=12.0.0-canary.869d890d4.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"10f49288fa74318f178daebc0299b7da22137eae","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/10f49288fa74318f178daebc0299b7da22137eae/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.02e841b2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cKvMzRkjn34RmqhBc3J83x5LSZ7tzx1HuOWAjMR2B9rlkUqvsx9GpZqf0OBleQyVe/60RJ3xYxs8FlAUtugf3Q==","shasum":"984453708067ae3ecad3181d83dc2cbcdb4f57f8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.02e841b2.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmZj8CRA9TVsSAnZWagAAFrsP/jWKx4pn0MOpzywy5yTd\nxdv2YBIEI2GLHxEkKnOYFp2gTQfVFPc09doC11wC6Ai2XirgZlipKa6u8Xjl\nqADkUtZJ89gAtYQ4r/LV4OE4NJ6PHfdJg7AV6MsOOD8oz5u7Zai53OqY/IO9\n9TtW+c3MkX0eLfAY4w7JWm2PwnGhLZ8R5SRgXf6fwJBtigY01AKCIbKR/6W/\nyV6d35Z3cZiVKsYJQOmbxTLyH4F0+pWzw6fle7IIyI/Q0NCgkvytppEAQdE0\n9DhKU0NJ48BP7Jw/OaXxspscNgT2OP/i/stOsZq0X0sddqFUCgFwX26/uFXL\nPVNLhLlnwRPk8bS5JieLbS6L3YzZrxXQHCw0D7Cegm3Ng/8gOUC1nI9UYMbw\nqhcfVYVlQ96KV9h0n/gQfL4PFnwFbGbgPmGY44fh4YWvyTRgP5vChRp/8w4S\nxSQd40952dwHi50qN9z5dMI9wjj5bMofloEQGsU+ig4Hmj4yeIpP4Q2vJ1MU\nGPsNHuzI3BYA9UOurcDVPVwIsxncTrrBUtJhBNRbMoQjy3qUd4NbMBPOFS/o\nHv2ypyySB+CgmGdqt2DpjITnaalriDcPIystLl82+U0HrhP5TpoClViY06Tz\n3mQLMDQsnoisiDYXPEiAYtteAC/rJhIT61ZoliBoKY/XLuNIeM2obvzqrfmZ\nJi2Q\r\n=gf0c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDidYjAmXodoxHLmbJRiMkESMzPo9paeJwQVx5zgZhb+AiAF80I0q4/TmeHUyKxC08jcN6fAs/0Bj0ORJ0yGvsIN6w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.02e841b2.0_1620678907934_0.43485146209221903"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.badda2f0.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.badda2f0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.badda2f0.0","@material/mwc-tab":"0.22.0-canary.badda2f0.0","@material/mwc-tab-scroller":"0.22.0-canary.badda2f0.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","@material/tab-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"961b6b76093a7229e8b8672e9dba3c2f9af0e61b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/961b6b76093a7229e8b8672e9dba3c2f9af0e61b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.badda2f0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UN3fvX05m72kyhY3BiRp3C+uvMTH+lZzSKnN1X0IS5Kio1+RRI6S74KzT6Dgh+e2jC1uWpuv79RNKd+Ow6Je2g==","shasum":"b5a5614b1ccbb6e97c36493bda20b1e038215ab8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.badda2f0.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdFACRA9TVsSAnZWagAATmIP/ifNCCbskeNXJIzfiWha\n/he6360w4rzxduNk/oKiJAh0+t59zTXcN9Tpw+cFxZDyrDiAjzExsHhO0r8G\n4gxpB4xuRTG/b+fI8Et5I8gE07G11t2YFo4yvgl7/eLMEXERCbfxS0Q086In\nL7zGWLGP3OmOdwqrhnKs4goAjvKfI9TvKCvy5qX/2EY6eSvaRRnyHn7+1DGp\ngtRjkyGeJWcxHnSmgTYiu+hi873Pn9ZA27d+yxteM4mz5Neprr552Uzwobyd\n6VWSWyC4PrAMUsOglOnSqZbXQd/Ua8e9eQo1kDdeeQ7fe77XPyncMxxHpZV5\n9qt1Vd4dNodsji1sX2fKq9i2jTfR2my3AkDECsGCo4yNcmHJcw/xp7KKls7n\nwvoVQVLuKmFgoOTRQIxARAVgssSKO8FzHuNK1gblkiuWUwZ9uWyWB26vXWaf\nHQbHPcaG3sRIrJlJ0xN0nWprTSzQV5xV+DXlrPu58tvIgxg53q/dvHyQGucJ\nf8mJKHZg2YeyjuFIPY7BRkWlCIZGZAglQmmOhLAK6NZTG4l8a4pdStyG9qct\newnjGiFCxSaEZwRVjJW/n4MU+1L2muaj/EHeQ5YIfHtLABsoBxfOm7cHxQIW\nku7ofE/+x98ZvIVb1rkzzJkbZ3IvO0VVF8GWQzQDM8he7LUxOr6dSZS/ZGg+\neIUT\r\n=YdMZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWjPUYBeKIi/UnflfF49lJ2e7QVCSwRm9tln5G6BxFLQIhAK1GCgu71qqWR0UpBqRBUff/XhrRSGrtPNxeKHfjsRAz"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.badda2f0.0_1620693311986_0.7168499691640171"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.004aca62.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.004aca62.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.004aca62.0","@material/mwc-tab":"0.22.0-canary.004aca62.0","@material/mwc-tab-scroller":"0.22.0-canary.004aca62.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","@material/tab-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"3c20c30c670567ff3483811cc2d47a795de96151","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3c20c30c670567ff3483811cc2d47a795de96151/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.004aca62.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-EjDfbXRSln9iJZT9d4lt950qGPaPsSB88NmY0nf5g9NrBEREiVkTqVrJnLjNWSSIpVWcD0LQ89FwTFrj2AMCfQ==","shasum":"47ad6d5fce472a3180d04b327fb984cddf46e301","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.004aca62.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmse8CRA9TVsSAnZWagAAONcP/jz1E95bIjdRMe31XWoY\nz/SLmzwkqeHmeanVLs7jQyFoF5QZ9ky+dBmrER4Vayjobrw+bKHRpLpuJiKV\nyrFJBZaQjL/0LtmR0jh0dy7BWMMV2+aTNFiHW+VbSQ9DieaFPhxLEksPqDaM\nqFYNwLkD37kDIDKg6ckCNRFE8T78UZgsutIRaqFDyQD2XjjBUQg3iwXwP3rA\nbA2SJxDbHFSrPsoT01dUUJDbxJsxBlG+MgwhmO+bW5wkWY0YRoU4sm4+bHei\n5bb6O9JxGQlQwQ1KXdJSvoy/nESQffhtgaEcDgj5dV5+Frf9du1N6l04zo1x\nT2RLvJMXDgyyAVV54JiTj8fRMDPaqs6XuUoW+JU0OKmZM6ToQSO3E32xlVR5\nYy1uljkGALxn4cehC8Mgo1iFfyAaJq/dx9/cKd/HRduqNtrhhAfSlx3Xggpk\ns3EjHSnwGQmwbm39cFoOorwfrOQzkOjWTSk0qnF1u+G2OFrXnV7UHSDsAEk8\n8O68ptNtFw/gQ/OsjZ3Ny3KDq4X4HkKPnahD5Od2dLvWWoOTuBluH4EVq1VW\nY1mqK4ZDlbtML3oL4uhGAHdX/wypSPL1H0qMLzZY7cZzrnLhcOmMDypGBsBP\n9PdE7zc8NvMPb5i197Q12vEZjZNKeXfVhj56lgsk1qr2scSyl2P/kvNquf6Q\nJV3L\r\n=YMou\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJfURAZAPJpFIaBPzlbryKEYbykA/aK/4y85xOv14pTQIgQVU2OW2pjdytwGp+mvZ8Roh4wNNcfLALEM3UTZw7erc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.004aca62.0_1620756411975_0.84638985314249"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4af17446.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.4af17446.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4af17446.0","@material/mwc-tab":"0.22.0-canary.4af17446.0","@material/mwc-tab-scroller":"0.22.0-canary.4af17446.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","@material/tab-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8065f1d05fae5a2ca4f95b50302cd5d56d43ea4b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.4af17446.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-aJ8MZDHEfcdEI1BCZKTos4JovknaYlDwUlX5jphDJNbBxrCGIGbDkn6ywPEGmDo91Ok0SmRQKwxqM7vruOEzdg==","shasum":"d2e25da515e895e34a1a204ebff82fe8ddedaeeb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.4af17446.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtEQCRA9TVsSAnZWagAAuJIP/3FkAIA1zCDaLLH4Dw8B\nxm6VJ4iGovp8T2KqbF5FPHwa5RMGUv5gOmyMo83HxYiWOe3Bq9jg0BK96oro\nkZaaJ02TGV2uUUNTzjX+xpLQ/8QzcEpJuWfULB0MI/gzd5XWGgcseDhe92Le\nxtm9S/Ie+R+RIQ39uzUNMyw0iNLlp340Fy+yfLtCI6+GFNJMREl2sAJKo7BE\nz7hjkvdGIWbT0Y9rZdeug2PLGnEqAwqtMEKTaC9N9E/2Fsjp5oPd3sB0Bvqa\nSIey0snbBEELzZrWSQmzFIsZlw3AJ62gP+gPHfS67BiUkvqejx2DnTDNqt76\ngjReK0DNSU+wZIPbI6UioI27qngaoiEmeA46upi27dSuH1cF8IBj0dEhzM11\nUcFWZ5klnbB5n4om02Coqq7y6Q/y3pLjnegK8l7uKxkLaxMWn+7p/jJJRUu4\nr1eAhLLTX3Kys7O65VoD+N+1a6COBYl2YmUoODV9YASSd8EJFXXtxcHy+jKy\nFE8Lak2XGEqN9Y+5GuFCzPsFf8zsG7YipcG9v8HmZeXpyoexXg2HrW9vjFXN\nFFAvO5A16VaosccBs56d3uUetWdrLT4mwTE/4OEArcOuMt+jP5O2jCAWLGvo\ncFgdsruSmfDeJOCLEpyVqxVH0AI8B7gbURdEUQUSzoGbiVtFA6GLS7PRDnRz\nJPaK\r\n=/lkJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFDwOSMFP5SP2KDITFL9C8sEEsVbaSS5l7TZE4zC4zZaAiBbutf/GIAPj25W6psy4JjJ71aL3w32iOi/DGsM4pNXaA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.4af17446.0_1620758800203_0.0781369648328265"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b94d7187.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b94d7187.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b94d7187.0","@material/mwc-tab":"0.22.0-canary.b94d7187.0","@material/mwc-tab-scroller":"0.22.0-canary.b94d7187.0","@material/tab":"=12.0.0-canary.ec22e1da9.0","@material/tab-bar":"=12.0.0-canary.ec22e1da9.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"0b32af6d751df8cf58980e7badd64494f9396b00","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b32af6d751df8cf58980e7badd64494f9396b00/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b94d7187.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-w5kCUSLI4lU5vOp76U1tVwPCXPwKtZmX0AW5Pcm26oKvxaCpDxkycea2gTSIuq6W99LTrWqOmrvFzg8w11tLhQ==","shasum":"12244ede57634f5261721e6c860bd269cfd7fc64","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b94d7187.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmtJcCRA9TVsSAnZWagAANY8P/09rUm8N9n3X1LcEw6AP\nfz1hhKogy7af6c+rCmv2MbfoEcbSD8J8zfxpM+6/0jRCimureZSZBNRW0njr\nFWh4A2Jb/OeZmBGh1lhHZuaaxjrQJb0Jq/YGVpIP8++28CITP4geWZ1726HN\nIMb/S2YetXfqtD2W61lamC7onSHZs1qZNRT0molTqcHPxkEY5C9p37smq9wh\nmSWqFru2FpOHVAquSwe43UFDPfs1mdmPJyS6UKf2H4b7zygugaMM/Ot66WOw\nuqtAwGd0mg5vfs2IAlEAQurcFR4aIuLjcThtI5OJKnFHLbdVaHJn+rjapMjs\nbnA73yd5Fzzbtb2PeK+DrpRwvjlhKawHSaS/HS0y0O3ISEeyTvNQOE+uc7ci\nOeJWSivX4fea4FN+MEaxRA+5KkoxZl+HLtPTdVdxR9ZfJ9GErwhrzes6IZGr\nx/L8IBo8cLoDdzL3COqw8z5Tg74gokMSkgxKvslBHbrNNkR64KVHMpJ4ueim\noZuLv89WNvBYg21OZVuQD2LN1RyFS0z/c/6+R1Q80hjTTR2ksc5JrRfw9g3s\nqBF8WpGJMgS4ZYWRhKhhgCdKDd+QCG/EYpuSnGZLx7VN6Sysb99Ds6gAM3PE\nudISRfFFcSprALperaTgzWwEzhiPSeDi7AgNwRz9fw9kBdWqbVSLoDkuB9b9\nV4Sp\r\n=A/T+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEVpITqtGNzGe4LAJ13VDldwDBwSGxqZuz/UNqza/h/CAiA3o4QV+4ytNbrer+YG+xsMZQTJa3cI46qc8oCyd2C4Yg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b94d7187.0_1620759132271_0.36887990084224587"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.4021b2f9.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.4021b2f9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.4021b2f9.0","@material/mwc-tab":"0.22.0-canary.4021b2f9.0","@material/mwc-tab-scroller":"0.22.0-canary.4021b2f9.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"535a4442352f807e1f7e655d0a135c6d12906ed7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/535a4442352f807e1f7e655d0a135c6d12906ed7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.4021b2f9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-UKRTJqLDDbNZSWSB2jN5/cBsZcRuL6eFix3W4u4iSijnJDp6ml3ST/LjqUY6apybPn3ynS8LQnQtSwBCEGkuxA==","shasum":"842de9be4226ef2b79ca35251a8e6edb2aff3fb7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.4021b2f9.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFAqCRA9TVsSAnZWagAAgmcP/R+HzrB7thi1dW53IKRK\npLcXmnoZ9+99OGXNwWpPKWwAPH2eb4Aq0uvU8Zz1G2YiaoUYciwn9ttoq1P+\nJaTnAAUbfJwrVv94qtCUSbxV1PImftbmIn9Xk+mZ0zQtGgFZT8Zr7QSiMqyU\nZDvEEWVVkp1V0NQ4qiPHopxrjygyOhI4kQjayxyeabpiENf3V6FVO0Klgxb2\nFCrafHCCRqRfYvKDQRPhai//XcuGiDzauFtPoPEQQGICIGklmrjV1g1V9ukw\n7AtiJP0yOIpJrsnBdnJV7dWVyO6UwCAsuVl3FF2nwK7IZjffuSW8QxxCb94W\nugIvntKXL/U16/nPNFCRuPqEPFws/7mOhK1OgAbOj7p3rLzuOlsSSpHWlLUx\nOc7oPtICcMQahjRieeOFZIvpsxmiaYZXdNwsRhHVyXOKGmFxYUKB0QajKiJ4\n/iP+x0X7Y1pF2rGK4JY8f0dcY7c6eCFifi/2J9+Fh4WvxmcS/zTpTazOizx/\nWtc4/6/e7y6pYfpCaMtBQ5p7baE+fiAjW48WtYEFLi3zw0LJeiuv9hqM4hE4\nP63DnnOykYWhlirW2ARv4qa4HBbdzNTPAGjw1q7HMwK5quA6AgMe0yROhrOS\n8bcIAXqy/+ImjaFTkzIcQkWh5pLdGYpJbKLEeQU78/F7Q5E9gaKPmYKDdTKy\nNy9H\r\n=LLIH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDviXKxCC/9QnjZ1MKJIncOOIqpzfeuOCtwnwuA5hO4UAiALVoVf24v1NkpdMHP0Oz3FaADhpiFCeaoipEf/NHTA+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-bar_0.22.0-canary.4021b2f9.0_1620856873718_0.07266834274980072"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6a5956a3.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.6a5956a3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6a5956a3.0","@material/mwc-tab":"0.22.0-canary.6a5956a3.0","@material/mwc-tab-scroller":"0.22.0-canary.6a5956a3.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"1164d783391049aa2ff9412e519af87df40b5406","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1164d783391049aa2ff9412e519af87df40b5406/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.6a5956a3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k6+XU1BVkGPV9+XjWe8avblihrw1gUHTby6AzY8KbtNNJAZLRhFlIBD/SS939O5VjxC6zjlTpdemHDZxkNLpog==","shasum":"e9c5fdd6ee3dbf3dce9b6a0292116826c5ac4ef5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.6a5956a3.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnFQTCRA9TVsSAnZWagAAWOAQAIGclekYItu1csW8DcO/\npC0UXCShytK1OQ4PKFm2unOj7UkoyFa2XKpfifB5al2osFTM+YNynjZEW/la\n1BHO1SSumzECbgajBP1iX8jFGQnPJAegEeI20yFOYnV3fKtL1F1+rgSe8mjB\nyM+wfq/7vLuGNZ93CTNUMFJ+4KHxc5q4O5UGxqCyikzNP0DIi+toZeeMfC67\nre67gAcSVSNsQTX/inT8fsINhznZUy9Lf6ePtNLO6kuKqDMhSVf6jHmJM9A6\njFBMwSvCcjg5cr8qjEUtt5XyAkK+9YrAJ/mRG8SnE1HXsj6495I8dE0Gjdb9\n/4vydAl4AqBelpDI5/mcmsvb2uF6SvDRil4O7+KWDj3sp5fEsUFiVx/U3Irj\n070mau0WJZzbcvLRDyemLiZpcaoUloAKmPbyg8seDKT2nuGN/dFeFOWsU0Y4\nWPvUqWA+5k04sPovYTSKnuK2jK1n3Jtd3gy8lKi0rnRGKNTpV2/KFI7AU+yk\nPIM1adAd+gjFoJIYErUrFAkKB7iqe6Q3atjrnA6edcUnHIbTOt3pDUvq2Sll\nKmtg7aVtYoZnHiTjQ8KbnYRMpRtPEzkxeuyx6PBfXvqdfVWr3vFanqx8JT5Y\n84T2EF6fqlZ8RLJPfkaacNKd7XRimkcOa/B2kDpAi1pUolJQc9VPVU2wLbqP\nspcp\r\n=PyHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICqEdJaG0uNSP9/1AKjcTXPiwbIBUxtQ6XoKFF5uXx0EAiA+XPMg+jn/cbedl5MZx2oB1j60kLbt4bVwshVScX21JA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.6a5956a3.0_1620857875491_0.852297507391875"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b6e8a74b.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b6e8a74b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b6e8a74b.0","@material/mwc-tab":"0.22.0-canary.b6e8a74b.0","@material/mwc-tab-scroller":"0.22.0-canary.b6e8a74b.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"09c41b7e9637c49faa75e5ac84cc73c8bb5f80df","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/09c41b7e9637c49faa75e5ac84cc73c8bb5f80df/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b6e8a74b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-GHjo2c7kI/lOzbqnu+qWvpny4UsYdNupDi+/0Uo6MFvjLgLHOFLeiSCNLaoRemJc7E4TiK0gdyGHsm6GE3L2+w==","shasum":"413045ba80a643b51cfa6cb66ddec2a768f49be0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b6e8a74b.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnF7aCRA9TVsSAnZWagAA+GwP/A0KYMVYgNckXqzRgrKw\nuy0GkTstpK6Ed4Nzds5Prc4chWZ7OaW+g/ZQQJD0Yi7xzXsVRPPDnWOzTueQ\nm6AnzlyA9pZ2+FpmgMHeZvs6spmL9QqBzk+xrWkZUvgCSrEXbSI1w+mGTiOP\n651AkWFgEe14OLjlOzydnGgDvklsGuyuU+/npehV15mo+yWrs8vWCVijcl0O\n2Mz2ON2E8/0JvW/MmB75597754pMYmtjZWZyTNKZmMJfEoI4hyQUefNj0g9M\nNVZeru3ip8udfeHYpk7DgagEZRgbprgBVdTpaO+H91Q/y0MfBJBXx0NBPGV0\n9uIUPCtubCKCskfdTQv4JJ9wWfx+m94k35UKFTkTC4wJeNZai4d5aWz+pBky\nxuNClQlGy7EoUENg/FdVC3+/vdnHAqCzhvJs5UlgNEJGKcGdFdFLdqVV87cc\nfnCingKIJRHtFQxZwiM5kZtlqhELM4M8h1WblOXoWkPBovqPCJno5xFoZOPq\n2qLLeccdYgkvSL33gHAsGidv8SYVxNFQyMcJ1NH0wVmuU+PidLABmqmtacA+\n6evMF8QBPHQjUG1eOI1DQSeHl61PtNYZ8KwmzWfF4b1IYtMWfS+cTK7GUAee\nnLvjScubH9Dyg30hy8vyqeXILdaXcORTg0oWwPwxrxwZEAOAAAoJWMi3ctXF\n6iRo\r\n=B4Cr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFaqbOXlLcROFqn2iRdy6e7FD9L8CIIT06klhQRX+pG2AiEA+3LxxSpFU/mXqgoAac7AMMMIcB9JFWyqEMz3mK6YbSA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b6e8a74b.0_1620860634589_0.22775246443174502"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c94e1030.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.c94e1030.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c94e1030.0","@material/mwc-tab":"0.22.0-canary.c94e1030.0","@material/mwc-tab-scroller":"0.22.0-canary.c94e1030.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"01e4fa09129b5963d59405355762cbd1962f1198","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/01e4fa09129b5963d59405355762cbd1962f1198/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.c94e1030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-LwxRrVWN+4aLDVFgU+lvo3pUWBczB2+eAyE3V1nkOtZ9Ul1hbsVE+LtlWGiR+XQ9cZVippOpTOndJjCJ29S0nw==","shasum":"fc5e36b93f7c38bc8b0a5c53a251b9c9245cf300","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.c94e1030.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGA8CRA9TVsSAnZWagAA434P/iYPxRuRg1k4kYAPXjcr\nJHXecyBhXyaq/xqUM9kXvnXAUwfjt1kqCdZMKq0ywez/VDJ5CxVdAmw0v+Ep\n/VOT+6WK4yyn9xw64TnoAlblN2b/reR4tNIugyZ/rqOS7PlScOxOL7AKiZIN\nVAWZiPJ5TgK+VX2yGRcSlzk4htAQ99S8484eqxPpA07FvTcm8c2+mN5qY7zv\nEPVl1G6SDQzp7MF7yIDryIXk47CZud2cAZY6zOF+A2K5R7dD5W3IAytDpzX5\nQzuJlxep0B06eQiuqOUTd/Kq5lwWTrPVB60KnOalONNfjF9Oa4JheRGWbtpZ\nEGXxY227ymV82VJd33z9QNYCOR4O3jscDWpMioSYlZflyTMGZIKJV18rsFxd\n7ZrdYG2J5bjDakJzWZdgr/Rw7/H/hlLR4liuh7HqXHYcABdVhJkvVDIl5vT5\nPVdpEIU6i/RaqHFtbpNk80cSWczLv4ds6SlszEG/aiKaDdGBx4JRotAg2k8h\n9ZyYne/3FBdkk0axeB5EMNXe14K0xjO7o4WHoR0phseHAtQQrPFNWYbp5etx\nFmi3xHNZKpaNYtQ3gcTfW49gJvK8Pvq9c5I4ltPTnHSrtoPNSpxjDYHRZNmN\n914uWDyDBSU7xCSclLRP4zxvtgCRXvdjx24KGmR3GsvAWIBEGKY9QbEV+US5\nAjWu\r\n=kRLE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbCq1fGRGF9mUW+32XdhxUfSMhCMi1IeUWJokIvbQWFAiAu5cmGkFXfQADTSWo/NARTXhy+OcPT++Qu5SMCGzvmFA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.c94e1030.0_1620860987688_0.5237228038672388"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.40a34e35.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.40a34e35.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.40a34e35.0","@material/mwc-tab":"0.22.0-canary.40a34e35.0","@material/mwc-tab-scroller":"0.22.0-canary.40a34e35.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"6cf3913b43a92723ad4d1144b964df3a8667ed7e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cf3913b43a92723ad4d1144b964df3a8667ed7e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.40a34e35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-17tq1s7MiKF+Z8hAm6ESAAgRE1ZsOIQqmHovE8tnYA245FPn8ieh+ZIdHdbPRUwhV3ATRp0FZMX/fh9qzkXcJg==","shasum":"b733686131639682b7cbd24581ed154aca0fb150","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.40a34e35.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnGvCCRA9TVsSAnZWagAAh4sP/2Iw0Izl2l/Zo4agSr89\nKwCyGqhn6J20KRyUXSHb7/NKmZ/1wHG3CctZL6XnIm7AYV0HV+hpIaczLAQc\nnJSv0cZj7IS1iBjRcDcWZp7HHKjMfghSuBagOM72LsKFtmjZfx6CKr7XPVoU\nyYgqIvV4F8ZcZeASaby7WJ12r3GFgRv6NBPPcw3vGfXKNzvPAmJwp6dqyZ9Y\nSf0kaC3bVPAhdehpsJ+SbIgw/93QAMYI0HGOYoyBJ76/TUEVSNWKBN53mVzH\nf28oQu/koTfsL50S81LAHeckaj6kttYOcV2KFBkYUlGQcCLj5ABiTn5wXAwo\nPRsvgMRp7GDO0lswgJYaQfAX9dCHo7I6EMbNKL6E/V0W3G2hgNceK3mydZxy\n6LHEg8jqamfL52CksmjAeZVg/el055KA7q8B7JB8z1rdtEu/KfpXGrERDO2i\nPudvZLxBSMGF37cJluWsrusn0iNeL5Ig9Y4pMiHDzGr+kTuPBN90kJFRCsQq\n4WqKAUKdz5GkQt5ZqmvyY75ExYrPzf1TB8Ca19Oj6r7HVt5JE2zucKP2QcEP\ni0rTkgvFJt1TxTOgeVxXMurP/mQxQqCQsdRt5m8CioifkOYvxme7pd9EMML4\nIx2WRtU5bca8AANsyfyrY115YxU1Xw5sSoXK/6CSFGB7zkIRGMXtfjcd2BbS\nbIbo\r\n=9AGN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfzpwPi14AteaHffAw3SXzUHp6WQpjqeWSf+KD+VfD3AiBW0aHx54OhnHC0+zCf1hD+4o1rVnwfX7Kh/5H5nv0WVA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.40a34e35.0_1620863938202_0.7638576979724829"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1be14d2c.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.1be14d2c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1be14d2c.0","@material/mwc-tab":"0.22.0-canary.1be14d2c.0","@material/mwc-tab-scroller":"0.22.0-canary.1be14d2c.0","@material/tab":"=12.0.0-canary.a23ecb682.0","@material/tab-bar":"=12.0.0-canary.a23ecb682.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"2fcf49467ff2fdbb2ab4a987563f556e6ff316d6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2fcf49467ff2fdbb2ab4a987563f556e6ff316d6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.1be14d2c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ozOv6ubt8RhuRNe6dvF6i2ommjlO0o/mDyJyY8BVlR8z19U8MP8A1kJX6WNOXTrY+9CakntjmIuXd+uY5DTerw==","shasum":"835e7fc87d48427cc83e7ee317eb6cd1d9ad55c4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.1be14d2c.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnWbhCRA9TVsSAnZWagAA9iQP/RbtdlmIOyAyKeHvxp5w\nJIxrxp/QEVC5dO8tu4yYUkmByf1YWCbviOA1ApXCllz+xFH5TcFdYcu/o1He\nCXL1SM2WKojof63W8hazd7phJfGavgCrmFT8FJPTIv9Tiw9BwyLbJYZLaNCm\nUhs0f4KaJhzlwQAmZHG8CT0uoBtvjzyl+kQ2jriRiGQcTIj4THh5iKFT4RQ/\ne0YsLEl061HDZO85V2cQkQpt7h+JBbILFo/1LqwHma9UikFaG824FclhWZau\n+JPddB024I/YQF9dPJ31UlFM+VaDZvmKEtrJVYVXHTk25+FwOkKhxo0fFK2c\nbFmPSsvaETHvguRFAS6q+UZ1mPs53HmQUOqAlIbpDkRjsNkhx5mmjVrp0LEq\niw0sls/mfSZrRYG90pknV7xuRKsAUz70fjwrZ7GEYyOwzrTOcHd1M8Fx19w3\nBBVciL9tgAnGNnpo88HDMulbstOwViCADyOOXkfBDglD/7L75W7gNiEzvQzS\ncZR1FOJLtMe7QhHIsmVpkSk6K8gxjtvdgu1bmw/0OoWk6vM7R9Sp0AVv92FJ\noBWu92XKifpGP2eRwgb7Luj58z91OYo2soQTzgnfxmSUG3YJxfmszsRu7cHu\nXhtMIvo5jt17HHKlIoYRAxOYF5yM4gcJUYLjt1h34hHkGjib0Vp0AUYeWX2h\nbw1f\r\n=MI+r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCKrLDGqBvaDAHRKo/GbJ1M3MvPE3N5OfKD3CFGoiePOgIhAOqYaYwaZzwDAhrnb5NZ4HR/cqJ1Bo2pi4M6CkKaK7pg"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.1be14d2c.0_1620928225206_0.6888888065351639"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.87dbd64f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.87dbd64f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.87dbd64f.0","@material/mwc-tab":"0.22.0-canary.87dbd64f.0","@material/mwc-tab-scroller":"0.22.0-canary.87dbd64f.0","@material/tab":"=12.0.0-canary.1a8d06483.0","@material/tab-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"publishConfig":{"access":"public"},"gitHead":"5b6b91a042dd241b949278a5e56cf671221e6a5a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b6b91a042dd241b949278a5e56cf671221e6a5a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.87dbd64f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3vi4fqSm7LrfHoIYdgBaunWGFLvJsyBXcPPPTxN1SFBw5Q4jYDrOtsN5Nf/w0C7j+787dmzGzVdY3tcxuHFvug==","shasum":"dc3573f9a9fe288aa2cf872555fa896f30d3285d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.87dbd64f.0.tgz","fileCount":13,"unpackedSize":47019,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnuSTCRA9TVsSAnZWagAA4FkP/RyIrmlF9eIltO733J1x\nSYJIrAtoUOBHuixyU9TNbdi1swe4R0HN/Djr8i0luMQzhCPOYznu4jm7S2r0\nnNMOwmj8rnm1NnKSJoOWThdsrkWxsCgBcLGprdAAZahpUCY7uyUtyQHZg/z+\nxnPV4G09LcaS4fZJkZwG6XecXOLo/YEhtVAySN6fy6akP4snxPVormcqvUGo\nc+1xGOSdFygwbQIInVqvDnZ9a2oQumbhj8Oiub+LN1s4fuHeYLX0T1xPWsVq\nkqjONjilIXaUZg7e63BagG4V2r4Y3ET2XHu4XB/NRLeyFps3lQiDD9jPuUva\n7zo35BNR38zuOhY69Lo4y1slSN4Yr51IP7UoZPBlzLv/4dUUWneFI3lsSBC+\naBAL+JnQ8rKpLxOkKSI4roHwjpZIEqCCGyoBedXm/hIeSw9/97Fo1fO2agbS\nnFzNH5LGhgwZxoMCtT0+0+kHGknfxGiKGfih1ezqqF3GNKZpXWD6HfV0H/Ry\nIwFrhdR9R0W9ZVe25UnMMZygnKcYeNfwwRTE8nuidGNl/f3mSP9knIDr+nsh\nIZGyNa1DK8O/ApCR/q0Kqmh0it7ZtNxjtAuwsX3crBqBN8iEIiRs6YetFA1o\nNYRaRiApQw8vZEWwURDqC+ebjLfSbH+AjNyijZapbjvWB00SJYEO15e7A5He\n/VgO\r\n=5R5L\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDe8cR1YvRC+XagDfwb/TKfC/Adr/DGtYXAbmNTM2jtOgIgDQJImgJKu/6A/lUiOiHfh3EPa1pMsi8At2ktgbALmhM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.87dbd64f.0_1621025938605_0.31023091603674335"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c452e4da.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.c452e4da.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c452e4da.0","@material/mwc-tab":"0.22.0-canary.c452e4da.0","@material/mwc-tab-scroller":"0.22.0-canary.c452e4da.0","@material/tab":"=12.0.0-canary.1a8d06483.0","@material/tab-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"30c4701f29e4afdbe58f6529e947eda655b1b1ea","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/30c4701f29e4afdbe58f6529e947eda655b1b1ea/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.c452e4da.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-R3ADvtI1uRzDMiXWt8ffCpi1EVFciSgslrd8xcZTMn1kpV+FFud1WyMl+8Ib+hMqp/42z6oLPm6x5dHhAXMhZg==","shasum":"a211c6f672c42e5be29b007c1f5aedc18b77e307","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.c452e4da.0.tgz","fileCount":16,"unpackedSize":48132,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgov0TCRA9TVsSAnZWagAAiRwP/RtwGownF8cHucE8wTWm\n9+ey88ujRNmC7qB6m1cKLhEbZBhmzDv27CF5j7v6pczmV9IhOY4ormQkKOwI\nwV4UTPb7XoyU7PjAawL4RM4BrugaB15z9Hw3u3SK/cl5HA9huE4UWfMrEkgB\ngwbesC9GxEUEtcGUqOhsOZEcbm9v4Fr5ewhwAJcaLL4ADkWmJ02uOvT2lNBI\nmQFwcIfJ9fEMQUxagvNrytgxYsa1Wwon5oWPB11TAfdeXzFT8O761EVOGYwN\nfI5usO/wMBQcFsBr6es8MtKcTABq8E6666A2E3SmW52AsNEiYogOA8TwWPHF\nBR+we+c1Xq3xkwers1Krc0pxj33V/ScL7DstjCvY77BmqUQdJWI/8ROjW8hS\nExwD2vqayCbsXgvgAo2gaJlGIwJJjJPv4xyESUuFDBaSn9w34ZEcUHoKkNBJ\n5+FuQoaQoTIoAB4lo/Yhv/ITjVQ51vBhYceObXlK033Bi8cpKh5ewZwMTBTR\nipbXdy1L3O7V0xDhbFLfHCxZcMS9Pl7iNboRLN0hIF/HyLgyUZBLG5SZvkU5\nXK9IZed5dB+jYtyk4nrMWn/hO4VeDmYxEMR4w8+Cu3Vso9ZpMPbqxBmTDqiW\nHfBV8GCPwK1m2NBntXgK4rehkVg1+97/NMtbNVPZUr+pSKNKhf3APjT7AnVE\nlVhK\r\n=zWq1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCY+PQuwtFHxU7j+YGGzDX0n3VSGmR0PZ/A2ITIIk0C9gIgFdid71mgc4JNpa9Ytpk5Lrr/tNmjObUI6eCevi+NmUA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.c452e4da.0_1621294354721_0.18409454660187774"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2212691a.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.2212691a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2212691a.0","@material/mwc-tab":"0.22.0-canary.2212691a.0","@material/mwc-tab-scroller":"0.22.0-canary.2212691a.0","@material/tab":"=12.0.0-canary.1a8d06483.0","@material/tab-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8fba3dfbfa73868ebfc76e8070cb5d33921df0f8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8fba3dfbfa73868ebfc76e8070cb5d33921df0f8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.2212691a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CElExyoCbSQ+M6ZACFObBs8c7qB73p4+N85nDOAEHWTPt9Tb3phxg7RjAidpZ6qD7YTGhneYjjBpk1FwotlyUA==","shasum":"5d8abe194a46e00c0d82e28114b9bd1471d19a26","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.2212691a.0.tgz","fileCount":16,"unpackedSize":45074,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowHpCRA9TVsSAnZWagAAExsP/07PX6PCPAhCZxA/o+p1\nRmj6ahoQz1ndjEYM514aNWDjXZFaN0gkwUM1r/PJ3+II16KWhgoUfe5M49DF\ngvzD6Uu4D80tvlPBbsEsDCYg0cxq3rDY2Y3E6Tj6s3a9jdZ442Rh+t1QGQUA\nqebvP9Ed+pzeOt+ejdz7x5jKYdgAfllcAsuTAWWLvWdnQnxGfiJtPRIBx7Op\nuFz///JI0LETcA42dEJIxLdqHpP/1wkimUAbrOKCilPwhwdTjgKYWeAExiwI\nprWVjaA8Nv3g+vnqhD1YDo5pyktL3+4goCxrSnDLljnqdLbeX+hNHZ6hLWZE\n3Qn9HuNnNzo56VBKB1B5v4jYtbZE98kkwYTbK0pU0VLWHkA2RC4h6SZgYQAm\nsJLGwjLInkiprOkR0TxAbomDPh8puNQO7zVUL0psACuhFJ5XIO6LsyvICiEV\nzvhpJcU+a030n5haO4b367CcJhDLi6A+OK9kJ7qj5FrvU666UqAGmcrd6TIr\no/U7EtMOzBPp77+4/CymOgnUJyyhjh2H6xeACfPFWofG6nxsNrxD0nvV8ofc\nli70Ci+IimdvPlQQy7bHsMUr/n9gmf+odklo0sCuAZl8nosqSi8+KhL5dEyc\niRC2camZj/iogTtaZ4gSaLU/+/9A4CWXNeVY6UGZjPArZzndWIOPxEnQ2IyC\nms6C\r\n=4nEX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIClXk6Wc6JC7Jz3tglmZlI0YwEZkxmnUH0nQV9imEwXxAiBEqocI1oJOAwN0SGoZbfQnF9TLqk3kouGDKtIQsxwanw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.2212691a.0_1621295593176_0.16251726638541908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.f748ff2f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.f748ff2f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.f748ff2f.0","@material/mwc-tab":"0.22.0-canary.f748ff2f.0","@material/mwc-tab-scroller":"0.22.0-canary.f748ff2f.0","@material/tab":"=12.0.0-canary.1a8d06483.0","@material/tab-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a83c1c5ee60e398896831041769b5c22e19b4621","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a83c1c5ee60e398896831041769b5c22e19b4621/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.f748ff2f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-cIoITgQZx5NDTHOSTFSikKn+W5P/gP24TcVnRwGf8Z24FHDHRGw3SfeQuJJPAmYvmEMxM9DSU5NiYaIlKqk23Q==","shasum":"ca813a59fa31504fe5cb9e1cb6c154f071e92745","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.f748ff2f.0.tgz","fileCount":16,"unpackedSize":45078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgowjqCRA9TVsSAnZWagAA/14P/0u6SrkeEW8pJ/kCORjd\nmGW1csvZ4vEmwxQ/pgwbQAFhXVvnNSwtCBp4LfII3eC7Rs/0q9+z9EuNB9wi\nSzOU/maOjIXw/qws64wCrCn600UpTKcqnKZvHLNRnAR8YYNN5C4AHr1vvvCl\n2dYeXFW3haz9tnT5/ilPhfilDSLTa6n2VG2vSoZrsOZmX1cFBjYYT0kSvFr3\nbsq2cwb8SwQ9jjAGm3JeenLdyUjkZDhPD0eiZIHyhWgBDsfEd1J5zoOzyHyu\nAwfG9meukOp8WTaHMCqHYX+OLC615TB73JHCZidWF8Tsxyfq9gmTcqB0u7pS\nh/h/L5EN3yKc0IanRu0r+To8DB0PG9IPtOguz3nTDTNYpzhAHjfEmS6/N92Y\nwvxaDdJHdGRKyj4Rur/zVfymVSywDd7T2L3kpLs00t2uHaVWhVEUNli4zs6e\nhwNpIyNAbZzdZwSg41aflqMAKoqrp002G8OjJnH4Dj4snu0AruMz7MBPx0zi\nGERPFAG9qu7fvrzNSSlfTThbuWSTymnmf/Evm6xbWCyFMfQlDA09IRh7PPI3\nFAV5kgor7mGdQtm3Dl4w4rgE7vO4RM48AMsaHbLl4Z2fCs5lN1FGTqEBFr+c\nTuKxWIK2AI7hcRd8bbp7vYefOdyTe5Rjx1VtImzRoxonq9oOdArnUjTWcNr7\njKji\r\n=hts6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGCsHSLVTYgSt0sFLgi9Qx3qDMfbx/qI/jKIVDIf7oxBAiEAu/SC9UpZTx3ttit30DM3F2+Yfwymenw8m+LcOr2yMDs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.f748ff2f.0_1621297386145_0.6437024965507478"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.cc04657a.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.cc04657a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.cc04657a.0","@material/mwc-tab":"0.22.0-canary.cc04657a.0","@material/mwc-tab-scroller":"0.22.0-canary.cc04657a.0","@material/tab":"=12.0.0-canary.1a8d06483.0","@material/tab-bar":"=12.0.0-canary.1a8d06483.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b1fa7339fbd44ff5149f7f38e481e6b0b6fd048a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.cc04657a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p0T+65FmD2EdMN4L0MStjd1jXSLjq5/w0wQ08WiO2Q7EWgh2iuABxwLLzhL4hMLWKzDXqmzy1rKI2QyiTRIW8A==","shasum":"5590d3a3e820b4a7a4dc134d44790735cd375884","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.cc04657a.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgoxaaCRA9TVsSAnZWagAAhksP/0kBQ0LvYkU+D+eSbx1t\nkeUJ9SwPuo+AO1Hhp/q1ye3iD2mq5+LM5ojTCmxxRE3+pUhn3WXiboX58P6B\n2PFpz9Y4TcTZsCEJJgvgNAeC5W34obpyYnWCMNtboo0tVrYbD0AH2E0Eko06\nVf+gaGHfhUyFxdWjHaZJQ8iFHT20wCCrUl5WQAC+zmX7IoAig4nCRv0FkvoK\nb90IAkUTK7sTYPmZh3GBAeMTt4zDIYOZoeyeaWV2c813wtZfKCQ2etRsuYCP\nHUjF53Cw6JvgAF4ZPXI3gIGhial9qCpXD1Ol1HKPUfMi9J/2etWnys8+x0HW\nDh3NJtIXMBigDcaPfdevFCelcRKT/a0r9zm815RjIwL7HWMXpu49Pm/XxiPx\nTXBiaPa71xiDHvAX9j4pgq6dNDxi2AIZuv2kmFgj2r2jL0XIkzly6HU1qTKT\n0ivq7P5wi8bbm9/hb/yfmwQ5BsRE2N5R8sIwQcVnJ3+ku94tjhSdKhG5rwbs\nr0myfY8b5GIJVG3q4bJfeWRNiRIF2Itis34kxjpxoXlZ3z+zVZ59196hP0Ji\nlC0UxNxufNkAHil6qb8rslXP5wEqevDfUPRCBncZdVYD4J+xvCorJ6Tgde2x\nkEDAjsgsFLDkPGPeH1O4gLght3FOs2q5e0Dz+PwXAYIrMGwzBEObGwUD+Khn\n5Y8T\r\n=T6Ar\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHlUeo8G29Qf2mMBoiUVzwiqj+5nCpJKAM8knmJ+OH5RAiBnRmdfMKYLWFz0b+ZQwyHRi5lN2Ncrt16opaagU+OcVQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.cc04657a.0_1621300889789_0.7744891585613409"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.3a3114fa.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.3a3114fa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.3a3114fa.0","@material/mwc-tab":"0.22.0-canary.3a3114fa.0","@material/mwc-tab-scroller":"0.22.0-canary.3a3114fa.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"217bbc3c5105a7f3ed67d47f0169dc3b8269adc7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/217bbc3c5105a7f3ed67d47f0169dc3b8269adc7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.3a3114fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zbltJDMi4WHUSa2NffQ4MNiR9vCxq91qDkGnLWoi61oYl+8T9Uzi1hvAtsj5TD6bLWmJXvybD0FLaESJ6LcFjg==","shasum":"0e04335c7c662e04bbe9d4a46fccd33510fee04d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.3a3114fa.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpaIACRA9TVsSAnZWagAADWQP/A2ijMfZ4CEcJC/b2iG3\nzidaXOakCh8zyzyKdVpEFDAwfUAa0d/d7frav19ptDcKghWYs2suAYckr0mG\nUIiIlFpBILBYfwhH3GP6HVeQwnTkt+LnYUMJ7DZVu7Re0pkfQzrQN5vjyImA\nwaRSQuo5OPiEReoaAUNQ5VGKMvqB+OHchzoWa0383PjW8z7P4gKKQhoVzlER\nvQ4sIRBvsU+rUZ9EWBEwpKInIKUe1qPwGDlmlEj2Q6iN4QFB5+j41TtbN8Gb\nrAiF0RSNHGHfAXaBfN7f+gGWVuDTxJsVcWGeyZTbDwPNvXAirnwJpp2h+YPi\nIuwWj6jKwYG6SgkzpJ6qHbrVqU/uwbSUXvgxJmpz5UKnbnEoafV86GUoL7Wc\nT9SHKomDE53g7b+8qalHcZVml0JlbFU1kIew3RFm1W3EALIQ9lfvNXG8Fp9O\n/iXm8O05M+wnvdne1V1ID6kVWLwqeB3Nh5uCuuqoNzgq9psUr3iVtLd2n2LC\nseMXkNBNpUA3OGkp865vfO1VVQZcVoieB06VNNAvDl00rzH7d8q0z+NsCvc2\ntb8qo8Fu70DGDP5YGx6fr+UvdHj+IVySPw4P3kc4Z1eakxNuOgQ61LCNRv6f\ng14PkoJ9/CbypPA08cO77YyvuIT4+iu/GHLzIc9f2q8eKGF5QuoGVdyCO4Fk\n6XTn\r\n=KPXA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB/w9D0J9kzobu/I36SPM949RJ6A7UjJ5IM51VMHrMj4AiEAlYV+AjB7fkw3DkeSMvyWDh1KFvhUpMkXjHdjvhzh3WA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.3a3114fa.0_1621467647671_0.7757286156695034"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b46bdf83.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b46bdf83.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b46bdf83.0","@material/mwc-tab":"0.22.0-canary.b46bdf83.0","@material/mwc-tab-scroller":"0.22.0-canary.b46bdf83.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9095fd5cb7570c346d2093f1eb444f3035718920","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9095fd5cb7570c346d2093f1eb444f3035718920/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b46bdf83.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ieIiv1vBPuZoqP9V+laXTSocoQwFZBhqAfHth3Xw82VpERWBgn5ZAD0CdFEwvyuNDk7KEVwlsP15/8RySubyHg==","shasum":"416e66ac9762c7af995d129a51b30b7cf39985dc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b46bdf83.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpcCqCRA9TVsSAnZWagAArw4P/1DVdWxrO+nMkRrt9t87\nfvJY+Y99vd+Lv1cXnH9mlqewDfuAMpBsS1r932k6dyBPan+i5xs+UtpOXHi7\n9GO0ipNMPCUX9GhRWqP1hWnn3MDMXzg8KKGviXpypV4yQnkOWnnlFIPVhCNe\nRbPJaZ3hYUcvXDDCUt5r63Vywk96Fu3h+/ezge3UmV5OA/JotqVerND0KRSZ\nUZtzY5mcZjoFCNB1Vuc+fmGKRESVbvubIoruo2kTFbsNpKRDvW0DPDHxWGr+\n8A8WJPYUipsfTmfchgkdIuxMhXTAEU13UkPgJotUIfdx2TU84udfUxx8xNQi\nNEor5YHR12GWaeC4Ep5Utiw/6KJHUgrYKwpfKsxoTR6vYYzIVIhpWdULdXT9\n52DJtMglT8PjJ/YZH1FqGaOgfoBD/e8f7OlhyFmWlAlS/G59HbAagQuPKEvo\nEt5TvrX2qfuRuIo356omz2eZDgy1m+dWqldqM7HfTi0oBE9v/roIS2lmUiiS\nRUMUwwUq/IshK35rmLLLNGEGh258ii4w4vp+v4UoFe2Yp4xtnWWRdF9XhkgF\nOEg4+ALpYYHSK1Q8StATlQ061oUhiIV4au9WjNZrIui/gunHK84aS8WcZafM\nwFCxxtyjKcZFjEurFHLrC0Ck366IJl1ki5+XFWsXjHdsHT7WF+2Hck8iuvza\nd9OW\r\n=IbIq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBNp66XdK94DrmmhKQSsqO5G/UWcfbHB6ZjZYfMyF1XhAiAOi7ZS9Ka92ZZe/siGSXh+KwWR5ZzKxqkdUHGh9rBz0w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b46bdf83.0_1621475497929_0.27505125898875904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b401a081.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b401a081.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b401a081.0","@material/mwc-tab":"0.22.0-canary.b401a081.0","@material/mwc-tab-scroller":"0.22.0-canary.b401a081.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f253eb320a1f9b9e236e2c6c0503900e63e2c6b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f253eb320a1f9b9e236e2c6c0503900e63e2c6b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b401a081.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-6pW5/6At6LoOvxntFp9BDMdcWc8TjyYCfVC2mZC3BeMJBi1vRQgp7NgzJpxVIsSCs+0hhDnqVoJ8IvDtio+Vdg==","shasum":"7a00b459820aceefed161e6e5fd89836af9c945a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b401a081.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqED3CRA9TVsSAnZWagAA09gP/jdN/2hrapa5kzcyv5d/\ngFfGp5NvX+QE0KwoZXe2ZrF5lQSVBZ3rBj5dVrsF/UvS4mxCD6+PeTAI4hUo\nOwSfgyAVb+GEDFxHeawLcrsxu8lnFzu/tY4NYO+RkDdXuO+Q6i3t0uSZJQmp\ndCZonHmOfw9DfwaI8CTll+och9QYOjRLD5Esd69Po7WOVVumA8uKVw8PWEj/\nA+emoJH46Pd6nd+C9jUuvmbKEhFY0oGgdo43ZkJs0ijzfkVnR0TtBXJuqjRd\npq7GaHglMwBhlOH6nXlNhxFCcck7Dumm/QGtc1NJE/WlxkG42llp+KIbVEv8\nezD+Mi6h8j3djlvXQPpf3WSh24vRDWx4WrQXBNWDP4lgtDa/Ub1Pleud6H5h\nbI9krI/tFr+7wa9eWLNWukUQNDZaK4isIAiXmdW1gap4+v6UaWvbF0XO9UI6\nGxDN2ZcpSfn4AUtpoUtCNoPTm2f5BjILCwJnwKiu3TA7wfnSBvij5jn111K2\nO9cJ2ncbcMtrBFZQjTvL/b20BA2V0g8ht+mD5vcJxiDf4omgWHcnSbzq0Es0\nAF2TZ5qruHf+uaQlf72CxwWhMrafv/qovEdo5nj3jNurwg1KQtfbj+yupMQi\nZM2gpqUBmnE/vnFBoNdLJZvZQhzbBC3HqCQqrfrSq8eszNl+kiSHvoXJZu2K\ncie2\r\n=SGJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFelWT8F9FxQYrfZlfDk9FavHzFy7j24RcFLHb8QnpDEAiBn4X61CfPqyIc5CmvsVA1m1P+YZf6OZ7DpjZ424x9cwQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b401a081.0_1621639415480_0.29796535178684347"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.012c8dc0.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.012c8dc0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.012c8dc0.0","@material/mwc-tab":"0.22.0-canary.012c8dc0.0","@material/mwc-tab-scroller":"0.22.0-canary.012c8dc0.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7a0952c38da1624fb6d0653e07cc5ebf284120f3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7a0952c38da1624fb6d0653e07cc5ebf284120f3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.012c8dc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-d+mtu49bbefnAwQ2OSBNCR5OoF9MxE4Z9ingS2fXDrRmEGspbRhoewdE7dXs5UbSZA2dNdk0MGKVCMblEyxy1A==","shasum":"23aed40c94b5099cfb9913ec65a4da961968cb3b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.012c8dc0.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgqE16CRA9TVsSAnZWagAA2h4P/0WfJBBH0EfGFiaPujyf\nU538TGs3wI20DAHuf5Km5VmB8jvpnl/VXXh3Y15mAh/3RLEQmXJs/R0ZTrON\nq2NCj1OJGnUFQSGNnsyrpIZpzDtDS9KBelZJnLk1tRa47qeYTFNxvSxYnKo3\n0wpTCfkpIZlUXZXnqZw+NA5AD+TaecSYyFBDIil0W17zg0hOhcOBzff+wxHZ\n3IIJy/TqJiwKT6dFjf4H7qD8aVay8sVJtjoVO3lNnZ3PLAFFrkR5svMyfLYJ\nVigZQALQ0n2MrcUBUT+agjBsqo2HJNlocddbMfn0cKMnNXW/zAJBOVvafF0l\ngJAJW0m5n2xXKURiHiVI8eQ5Ei5KaMgzTZRqlwyzKqU9NgQDHNZZ2qFyMbdf\nwrGgugUFlIVwbKox7O7QMTAgpms2Ng7oZ3mfbn2lmQhEPDEQjKNBqbVDKF5W\nx4v6vROvQj24Hx6Fsf7wdHaY9r6RpmP/8PKTUGlOEvHeh2M3dPnTfUvyl25M\nLqyWbxgcZPDo0kLOgWKFMpMt6vS9iPOdUvjh+U2ndfCNIn6FxrS7J2kzl0y/\nrukaDvc9VsqfpJ6R0ZVu6vhOVBuP419cCkVZGjZjr6Y2y9IhHX31KLDqN7ke\nc67A6wpbPXH+lDzVCJfDF34UVvHaQhZkO0TAR/cTWRviz5qAI32KwCoF5k/O\neA9M\r\n=g3X8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA2vuWKsN4IUTNatlF07qfWoTVBLcu+jR4bU7ruwUt8PAiAZLDYlT+5xGuckb2on0eBHUgs8cPY5g0j5mFTjBsxtiw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.012c8dc0.0_1621642617784_0.685718549827911"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e01a1731.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.e01a1731.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e01a1731.0","@material/mwc-tab":"0.22.0-canary.e01a1731.0","@material/mwc-tab-scroller":"0.22.0-canary.e01a1731.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8afd20b0913094a1c3c1b084d0bec7d38724fa00","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8afd20b0913094a1c3c1b084d0bec7d38724fa00/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.e01a1731.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-B2b4KoFI8Ka5KJYRz7rKPBcyD3wKs+tIDszJ+zxnKp5C3U831Au3ee+x3ZxoAKlRc1FIXs6vDrp9pVRn7Cb+ZQ==","shasum":"3027170a030203806117d33d26cacb2efb10022e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.e01a1731.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq85LCRA9TVsSAnZWagAAUAkP/0Yv2XDQgiuK4a+cJfC0\nxlWeDez+SXinomMXAoUzi8qTywOteoY5KcoE4PLalwwDkR5DZ8To/Tnk+IYq\ntWJwa6mhmY2hQSkOJYJNmYUGxp1m7Dae0/gAhgr5QIbV5yWtT53oDoDigKMH\nVUDy4rQOk7QxqLr33Wtjn573hBSMmcblcjWcmtIiGsj9zUJJthfb2tk+1F3/\nffsf8bfKRHoapGauKx0thwBudsgyVQDZhxkA7gcIWiqTQuAKhH9kjZPIkArK\nAFwPJcbCDx1ivkCPmeFN8Z7hVJAjfwnFfAPWsXriqqkm+NrqEoEETs6Li05F\nO2CFM1tg/qlTbO5062QAKFW4uARDzCjvNp1TTLNIQu/qiFQyXWmjM57nfN0j\ng0UE5bvoT6CD5GGpBWHTKxKjBz2veiYvdlYiknSt56v3Rerm6RCwi0INBnxy\nPKkrhVJlu9GKTOmfE1a7Q7KKjTsWC9zcNs/YY1V0vJW5COPNkUJCtJHeQRQn\nnG0mhd7fB2r29Rexrl/bLkozHS/cc9YsNYmUROHRB8V6PvNjmIKf76DldXLw\nmMvm0xgvURkQN5D11BKZY8TX+BMoMoM5epg449OrlQ6RgbnGnqAq0Oa3GHGj\nmK9YkfwtvYTfcDFOu838HziOQumkr7L6R0/Pf3SJ8T9HSJhZAovbVOx1Vm7q\nC2MV\r\n=XNlz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCelqt12CcNDiQDSMUpV5I1WiYf2wL29JakIDO1a7aa6wIhAPwiZFy83Oel8j07359cP0SG6A5tSFAAicyO5ion37Us"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.e01a1731.0_1621872202843_0.9263511315315593"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.59174b9f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.59174b9f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.59174b9f.0","@material/mwc-tab":"0.22.0-canary.59174b9f.0","@material/mwc-tab-scroller":"0.22.0-canary.59174b9f.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7fb9171e05c85b1bf933cbbf66a44ff2e05e9e25/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.59174b9f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5unjCHQEOI9GcRfudnFQTKH/LASsiNeXpY8TAPU5McijXDyAUbmyVIhR4nQIFO/poD5xKva9QIfARfJbyMuQZw==","shasum":"ab5ec2d371d437470ab08bd6f467810c7170b08b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.59174b9f.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrTvPCRA9TVsSAnZWagAAcdcP/2qyTOGKMSBSfCLXLLE9\nbcu2NZ8fmNfxK9Vj08Sbj2qiGGeoOQ/J7Tr7hEpNrDZnoCzhZsddPLR8vlCR\nLH3qXpgLv3MRg4jgkYgcdkXUAyQAijHWnhKXnQIYtEhEWLtBtxcVknmDyRNy\nxVc2trMxf0QCVVhLu1SuOTDHqT/40hRW+//1YKNluNwzxtipA8VVSfxW8nv5\nrUzwH82WgHctwDrnLBAFfk4dh9AZKd1CSJjBDbKSEwE2IqWn1+oqIp2+zAHb\nP1cnPYK5O8ja0TIkIOIJczxH7fVri9sAyBM68DhPGTyei0liWYJ4QSm9xu6f\njwdTCzXeFh0i6xZIK+XvrJa5ZjefsO17Jaw0yBowtZ7uauDJbeYzsLAs/pn9\nn4/6kZGw85/DhfUoSmeVGGD6cnEmfborIssYUnfsP+Gsv4s1W4F4uIm5XUL6\n5w0zkbH4uh5306G/fzKCToShvOhn9xj8i6fyD4kGFMsKJRTLJbQ0tuh2+ixa\nbnjMGFNr2LhVTk6hdZycfgGn1I/B9MOuuJudw0KooIhHvpQtYpu2UOXJcAIH\nJfG+0DaOlc+hJro7Sx+M3beaey3n9FuI7fBkOcxSLpQVp/vzIN4wnxfWo5L3\nh66hLnQ4q42QQhlURoV+0z+hqYmr9QDai7QarrCqTBv0CltCqJt49feaaoWE\nQaqx\r\n=qX17\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDs2j3WLpPiFvR2ISz5sCTjaR0PqN3cZItecAnErbn0yAiAmjiJ495bWNv047X3f/iMUpLZihfdS9fQLp9UqM4iPoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.59174b9f.0_1621965775166_0.3551780993713147"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.c96cb2e0.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.c96cb2e0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.c96cb2e0.0","@material/mwc-tab":"0.22.0-canary.c96cb2e0.0","@material/mwc-tab-scroller":"0.22.0-canary.c96cb2e0.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"516910ae9bfae62513b95080369ed2be100b1c27","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/516910ae9bfae62513b95080369ed2be100b1c27/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.c96cb2e0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dn/gdvOIFcQyqZnFx58uP5vVgu+Zl7Jk/z1AQU1leAG9U1Zhrp2i11xuj71wwCjxmSSvNgTl29j6e9CkhfgE7Q==","shasum":"0af377fd5827e258e1e86402dd696bae9d798b71","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.c96cb2e0.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrUw6CRA9TVsSAnZWagAAVREP/2SS9oZjuR1tof6aCuo0\nenHN7Zpi046yOcW8ajP1uLP8L+328injzy3zlcgQnCcVRl64ApO0hxMlgbDF\nsBeoR6dg160HzHsOKWO4QYelZz4Fjg15Ncu/mjKwJZFCbJKOccvO8RCQO2IL\nejLBvlGamoiOCsCaLM0IECZ27Zjhd9RCPuxm1iqMf/9MDZD2KAAvN/n/wmNv\nEJ1a52Hf9e7hjv9des74dXW7BbxkqOcWxiYzejT7+yTeF/Ul7HmszTpGL48h\nFcZam1mk3jCd45K/XIHBCEBxzSwz9m2K02zOAbfyoR/GsoNJlzYQeh8rdCso\nRYSHoRoBhTQoH3B32rpnnt9jW7Re9yua9qoQlEVwB2BsDOaHxjfd0fqyPtXn\n0jxFjs62YgWtJ9CXgICebgNiwKpeLCm12haXCN9rPkH1z1Iq+xI+i6aohOD8\nLY9MZmRqct0K8Fy+ZJu+MHQ0VblwQ0hliUtOoSFi5RiauOVix60k1UbTw1g1\nAQjhCPFpuZ5j0qmAz2k5kmEYIXJoTK4WYhgWObeUxYQa1fX/PqWNbhKhGxcv\nTq4SSWsfyejt0BX1IyvDiNsZpqUHMNbF/QnF5iNI8QHRz2k2NImOR1Zz3Tp8\nDTMeSOLFWfzFYgvg0fbNwIzSVR1wRsVozYoB3GOBNct1fj6d+dqlXK5/EKOW\nIUEf\r\n=bcnO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDNarPLOEILzFkzOGpPJI3kJOp9vjWqUzsiczjqrQTrigIgKMcyA/8uV1cuULUUaX1/mgNegvzsoFJ3Cme1hCcYBew="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.c96cb2e0.0_1621969977861_0.7150945251250513"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b9b0e330.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b9b0e330.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b9b0e330.0","@material/mwc-tab":"0.22.0-canary.b9b0e330.0","@material/mwc-tab-scroller":"0.22.0-canary.b9b0e330.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"18c2325baf4aba3a786f872ae497d8ee283800e0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/18c2325baf4aba3a786f872ae497d8ee283800e0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b9b0e330.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TlvNOlZzJFDYeNWDq+Mv1ABgx2BOTiyd4zdm5wH5e3bdPNeUtrduBf9QJ25p9jdho43ihQWqKibxTgZvHxZd+A==","shasum":"ea3540254bb5aa5444ed8f2f1d3d46637bdbd806","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b9b0e330.0.tgz","fileCount":13,"unpackedSize":43040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWWKCRA9TVsSAnZWagAAWVcQAI8nFC6r9ExXS1K8ehjo\nsv+TBn1anuZV6D1n3yioiHF9GlAyVvT1vhSH0rAv8tPUkMvpW+Ejy+Ly6nsN\nreh2Vrzm0AZ4+c37oVMPP7lMpwxNl3uXI59gUsFkbt2MX6AXdjDl8jWXqZZZ\n7P/EELk/fV2Rd7b4wFVYM6HD5iw8IRmoFNx0VB+RJ6Ok4Pbrpumvd9Szkwif\ndHjwJMH63IxcFgUK1JASiu6gUUHIIQOtJ4g5B4xhzetsoOoix7I8bx47K/EJ\n26rJuFvkaNGJWbPuLWxtsTzy03p9kCtuzZJOMj3lGyBrqxk5DdxudSRF3Cfe\nCQKAuDtGtXRZC9bXeLUY7izaoddNQ71UUdzB61SHC53owQN7/ShwC/BZdjqS\noyTXeunsnuMYbZte+V7jvvnMCpZSYYDAz26cLVP3ZlhSjdZYF6xSo8/dz8xH\nG7L0ZqdHp9HPYzYEih15im75ukRd8DnOwRXvVbJfp3pw3A0tMXSI4QU3GHzR\n/JU2ChLvbvPJgzTxSzg6EGtLoMKQRrbXX/CAOkvlRsVsehvp7neaKDQ65mFu\nod+FCG35ADfGmsFoTfpRUsljq37cuELGwzwccosSq3H0w7mt6Uzk+4x/1aA4\nrSCuRlHqh09ITMbT+ZswD0Vfv8fS6m0iiipIQiF7royyz9XOG7vY9AXk4SQW\nSPFO\r\n=BYI9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF/u9qnP0iuuVGpuwdq76cphDShVpS3o2ckkbR6ClOIxAiEAjEasdcJ1DbShbceu6QQPmicdYgZ+z+2gBwwX3exqKY8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b9b0e330.0_1621976457944_0.5027338880250916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ea2a8063.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.ea2a8063.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ea2a8063.0","@material/mwc-tab":"0.22.0-canary.ea2a8063.0","@material/mwc-tab-scroller":"0.22.0-canary.ea2a8063.0","@material/tab":"=12.0.0-canary.4bb5eea2b.0","@material/tab-bar":"=12.0.0-canary.4bb5eea2b.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0b10a1191b28a4155d8f169ab9a5a3003efd3fe5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0b10a1191b28a4155d8f169ab9a5a3003efd3fe5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.ea2a8063.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jmsjJD6oPYOwWhL1v5vzDQn9sGjkNBaRVEj//7qz+zH2BEpAJ40DQZMXXN/wLkpCzpXkUNINyY0NL3Q8LzGWAQ==","shasum":"937d6e48f9de546f361687df587eaf6d0aedc0b7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.ea2a8063.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrWa7CRA9TVsSAnZWagAAiy0P/1NorSue5o09ZMMtkbVy\ntbShvGtOjtrR9HXb5RkUUSaiwEOg4tJSBqoDcMBj6vuJwUEirqKZ3MSgovuX\n4cI4skCZsb1/TQFo7GSgKPr6L15Xq+385/Fkge+A1LgOi4N5VlRUuEEoqa00\nulCI+tGbPcph7YvtvX/ksrXQD/xLhkP8GuPe9+AcU/AOeFuFYOO8d8Wzn253\nWKjlg9HoVU0Phg18Eh84RxER02ImVijy2Pp1GEaPaOkYczLezvmEbDe+7POk\ndA+dg2ciqfnWsyVN0c3d7Y9+5Gp8xPTgfj73EgJcy1OStdxBSKQ48z1jQobW\nXk1OnL/PaYiM4SxUjDKFDEAPjVCZ5m5oRwkYMNcugfXaV1gZ/zLLSHn/mjPB\nzRf8bnkkV5gOjiaIxBkW86xTXvR6doXmVfXevdTq5rztJoXm0ANBR+p0j7pS\n6JovJLEu/8u3RjdwXRWBQo/Tpx6P0RZWjMdPJjiY1KnCpAFZqrq2tVBqJiLP\nckY8PAde7ZOiNlnH1GPD5F9Mg6PP945hWNGvrXMHdpyRI/aDtQV9gpDGlIMG\nNahOG7KSoQWeWs8Kw0x5a8H4/P6NE0oaGSvwyk6BPc+OW2N85NdJU7Y3a729\nYqe8BwlfTCOg3fRcn0WUyfy8ONnekZtC2S3MHQd6qbpLHILoIEBFpNut+BUC\nc22k\r\n=RxrP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDBkvQSdh30RieXfoiyucXIV6MXg1GxRihF4xEX8j7c/wIgYoxuabesbIeZ/Lhu5i/Ad1RLEc947oETeQP4L80cYdI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.ea2a8063.0_1621976763451_0.6398558571209909"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.60cd9178.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.60cd9178.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.60cd9178.0","@material/mwc-tab":"0.22.0-canary.60cd9178.0","@material/mwc-tab-scroller":"0.22.0-canary.60cd9178.0","@material/tab":"=12.0.0-canary.fadab3372.0","@material/tab-bar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b194465fb86d4af03f65ac72d9b8427df2a2e189","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b194465fb86d4af03f65ac72d9b8427df2a2e189/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.60cd9178.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zlTAsoRLoaL1kbAcbi+YH08mUktrhF0kDeH2ihPSiSZ6MNqxxuEwLI/Bafvo3RlqZolqxkZZTmzsXa2J6RPW3g==","shasum":"f58cbbdf439b4a2ad25e779dfadb3554dd1778f9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.60cd9178.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrYTdCRA9TVsSAnZWagAAkBoP/RXVvLuEHfhoCtLd9Yh6\n4sdTvWGdzS10pmM7iOddmom7iQhz7GK1n34+g9/goIGxPepd3xB0Kmm3hHjM\nUIU+LW4YuE0gSpa4sre+zd2rFHIScLFbnszAWtgFqGKEAHXLkpfYSaqBq9Ik\n0UrGeCs/wrDON36SYvagZtI3Yk9nNyYjls65s+YpNcfhdvmEFFND782/s3X/\nMe9wg0Af5Qeod3akO7L0VI6dtwKeNeOjo8GElaSd5cRSFvMAqNedC0Hukdxh\nUkOZJ+uupFkPCiap/ckyQzfOu/tnlHlv9FRPiAFwSR8jE7gFik+1bSm5i24j\nhMd2Iikd9Ge6ypV1dNmQmpvAl560C+oltN3KdKR4d8WMDRGXAx8CJjp9Vefr\nnRtgEqPlfVENiOOpxXtxmKLrOcM9M0g9qGxS5UmsoMMY+2kBeoOOfanb6tKl\n8wr/uE4mvV5RKwEdyzUPRg11urMzBUuPiAKHKTwCgW0D9HXzbTaY74Vrlrx2\nRH3UAqpp0hsD62Wm0QdrhZsIv0dnOU8bfehf2YvxEaDKsMlSakGaLKsIPYZw\nTGdk9QGwftz5ox09QzzyrlCqSNkC+zD0j/hZ2pW/5hStv7Ir08SCdQ94FeNb\nkk+AFiUrWkPkZh9f+BtK1uob5LxNqMbayXPF1GdC42fJOzr3qQFNIOhSX2JG\nSfTw\r\n=L+LV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEkFf2wpJwJ2vXIMBCP2Z5onU41IzO5ZYOoX5nqDM82zAiBlca78fGed4JlijBTWJdpItPW25ywID/Bp4hYXghCA2g=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.60cd9178.0_1621984477322_0.8105667478747185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2e2c75f2.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.2e2c75f2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2e2c75f2.0","@material/mwc-tab":"0.22.0-canary.2e2c75f2.0","@material/mwc-tab-scroller":"0.22.0-canary.2e2c75f2.0","@material/tab":"=12.0.0-canary.fadab3372.0","@material/tab-bar":"=12.0.0-canary.fadab3372.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7da0cb4191a309db2509b3bcff390b7ae8e4619a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7da0cb4191a309db2509b3bcff390b7ae8e4619a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.2e2c75f2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yiMbk1bproYOpTU9Ok246ya0923ULbcytEChZ1a4oaR5vbjEga8B2TCxdH2wRK1UexqwrpdHuXhOmTCHoBxPQw==","shasum":"9fcaf8b200bf9d491703e3b0a37d639433f84399","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.2e2c75f2.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrZJcCRA9TVsSAnZWagAAFlIQAIBp9NFxJHHReBix5Zj/\nYeor/Sc4b9w7jMAFBUT/uPpk7azI005k7QYEKAmQsgWEg1WJ/k3DowpCj2UJ\n48bQTKPI8FVQcLiYWnKtX20lvF6R1IR1qEgbGOuqM+FJjqeqVbEoU0ZGkKva\nDt3E6lBu02695yX0d9waGM1/ingTLi6ZH2uTkvyIILQPE/aRgp3YqitxWNTW\nvg4XwrEBZxHVGzSqEUtQMTtRZMN92IEJ/VuvtKGLbwh4InVHpEMgYapeoo9d\nvP/LFLXYkd+rmOQzMpLWSaj/yBcFVgNTlmBQfSuSAdpJg4etWXz30e0kRKDa\nI6E1CFcz8FUpiWxHNFZGKREZqbF4MV63lG5gKfmh3JUORMSvk7VrS8c0fEYY\nsHj77zISjwrwp090OfuqYa0vwbOPtw1xUIAFctStVzpOKzzQEvtj3AH6kubZ\nAUmIyrkx7fWKMPLjOnviTb0tnxyZs809z/TxSw3cRsRM5a5dS11ZQ1qSe1qW\nM97DLOoBsD0Z04Ug3lHj4bdhlsS3YSCLu5LH5ka1h3iKZTt+zuMpKjI5mSfd\nKxQmGXMWp3kwDna4sm/fmPYN4IE0MGjZy3rsQiWiLADg8pjxamFI/hDpTtHT\njAkLTvk/3DHmA9J3eMtZB6S+pRk+ILrf9Om9OdkFZNKEwdiso8V/p+2LbZLE\n753b\r\n=jdgY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC/XhOGNYDmT90PEr0RPWE4S1IF1H/tXOKJzzQgaACdwAiAcPzP4DshL2Jm0hLm3CA4nyFoGd4N2B5zCwU1bRQDCFQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.2e2c75f2.0_1621987931579_0.5488988237067223"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b99c77d5.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b99c77d5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b99c77d5.0","@material/mwc-tab":"0.22.0-canary.b99c77d5.0","@material/mwc-tab-scroller":"0.22.0-canary.b99c77d5.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","@material/tab-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fda182a00532c3dce9d3841b88c80c56a8dc757","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fda182a00532c3dce9d3841b88c80c56a8dc757/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b99c77d5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FqhKKOSuCkmeijzM5MGACSyPbMSyFKSHC15kTm48f5InOM+rRI1/K/X3xeVaBouwt+X5BYEjBxq83ohY/JMVZA==","shasum":"b9688a47e9c8fd9e60499f4114762aa8d2f2906a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b99c77d5.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrp3wCRA9TVsSAnZWagAAfZwP/AqW5f46C0N6izHXUenE\nseLPO4Drc1bMfMdkFWfF5DM0v8kPYYGgGS5KBUuAMHEJMDXNGxnx4v2jCW7h\nXXZ/zxdhw5Kot5aH9pn/q//IIvFsGCWLWlxziCyVvxl7O8/+CsyAD3aDOPFX\nWQ33jgMk8P3G+uobwQx9TOcJ6SibaswigMbVqTCzP/IvxfzXqmnGhQYMPm6C\nAyGD36aNxOIiCa1tC6n4e2UJkKL4jH0SIDu0fsoct0e6dDjcmikzCWS5vEYl\nctZ1N3EFUpfGd6pRnAfknVXABRmjtXPXni5XTuKJ6HB7yKmcfrsZJccxuNzH\n5FTEOj17tyh2jR1+C0KqI7BWY4iy/6CTiwSQq4whQFsaDtqjLsn+xBad2AsZ\nG62X2nDphQ2S57Qise3lJ1HB3yn/h4owOcM9JHE2t9UG9Tq+0BJKwe/ONij9\nLwk0njih95DYEYyvwsqYIZImDbRugViZwXCrMVZdeBhIPjHm/HnE8C1KJkz9\nu9YyZo68QRnfgXl+OqHinveCLAymaqBG5yJzmvOckxwHTFu+f+6jBr5GYnPW\n760dnW/nv8vx76QP0bg2b60wWrZCAessLXn+H4KgYcJ5Gw09PgkiXrvaxuTb\njLDi+zSBiyVH3REH2c/SERocI9Z5GKfqIkNXw5C8EtXfx+FJFDr6f/JRcbIm\ngLcR\r\n=n+6T\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDAwL6XIhK5gtAwAHao6IeurNSL4SJT5oyoDOK0YV7xBQIgQfI/sh2d63a05sNy4fEVSs0eICP/Dwhmhf9SBffLaw0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b99c77d5.0_1622056432357_0.6025391385227992"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.0de82c12.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.0de82c12.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.0de82c12.0","@material/mwc-tab":"0.22.0-canary.0de82c12.0","@material/mwc-tab-scroller":"0.22.0-canary.0de82c12.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","@material/tab-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"02037fe47532247fb8d3f160ce76eecc87a64963","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/02037fe47532247fb8d3f160ce76eecc87a64963/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.0de82c12.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-k3lSCNqO5Snx5rbL6pvpnduVtcDUmuZEjSXFkTsfxt2Cqs4qKcZzNsO+54tBt1nDslMptJSy0qAUgXKQGZbK7g==","shasum":"e716047043fbe795c142b2717cf1586ea02964c4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.0de82c12.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrr49CRA9TVsSAnZWagAAJJ0P/2EhVskN35sF3IklsPNM\noAEsXayQI23Z09bg2K63OVKlx3NuiJPbbg5yhchPZhI6plzgGo/L8jEwYgwL\nee7ADPS7phVbVi+VRNerTg4oY99iOwXkrhDFLh0QGL9qELvQEQM607vPqaGA\nd5EcIUEqh/InnQ+LM73eVctdlU0sPFcIAV/WZug6L0Bt4fhhj2ns4fuXMLLM\n43olk8PCnS+qzFd+XTxchBIqwShXFlrZKTKK3lnHmlHextYe3GcvT/sEo8sH\n/d61YXzLRxo08+uIyFmduLKvzWRSYJgFTDvS0ux5LXLPh1SLoxg8jLAllntd\n4Ig4AElTqTB1gG3tCD5JR7pzLIuujWQjQp5gjk063VRGKOg6ViMvoWJh2Viz\n87VdYkvn0gTK5aB8Z6aYa2tDRPpJU4yy3LOQ5qfz957xGOEFKf9+cuZ18BKd\n7JtpJXA+E1UbLLqcjCcBeLP/z7CnrIE+KWzDgmsQNrYUFsBfJYgsL9TdysCO\nZcTqJz+G64tbk1uBjFYjXBmsU8KYHq/B5T3Yc30fyH0hBPJ8zm5rVyJwRpFQ\n4un7ojdLiC+O1b1/22aMH7JHEBqWHS4XLP+YK6SIz2s/vUrjfUlQ8QN3ko6x\ndrZf5369c+1Ypt1LNNIEk9xB/I4KJwlemipddvggyrmRul5ldEbvzGRMNGMX\nNYxK\r\n=5XcF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAkv1UTg2Q+JATKAHZ9ISUpXyjppKm6JKZIumAAYuA5vAiA3vU1vN3ydFW6y5L/UF2RJYPQIuV7NzlhhFm+0VAZ3qw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.0de82c12.0_1622064700906_0.1601520599924895"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.227a4614.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.227a4614.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.227a4614.0","@material/mwc-tab":"0.22.0-canary.227a4614.0","@material/mwc-tab-scroller":"0.22.0-canary.227a4614.0","@material/tab":"=12.0.0-canary.ec31ae1ed.0","@material/tab-bar":"=12.0.0-canary.ec31ae1ed.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"882557fee992155765312df09397dd80bd837720","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/882557fee992155765312df09397dd80bd837720/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.227a4614.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wcDyA9djMs154VA1/MCSm+YXvmbvSCv0/eAgCCGP2BkkQ4L9J1gEqBKB05dfKZA1W77r6MFVT1GlYr6q8px8Kw==","shasum":"d2963db15d2b6ee8fa3583d0ca3b837e9e7860d8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.227a4614.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8LnCRA9TVsSAnZWagAAPBMP/1XZwU90qfbWRXCxz5xp\n2QHVas4WefSTg2SvHzCW7V+X5hioeai/FBM0uj4ANsQRzKmZN8y1xPkPYPPv\ny/ITvuNYZIDphjrppuleXukgHNY590Zc8ys45/RuOv4QZlYFfdSG5b7pE6bv\ncqbVW1ZB4MN5H4Uv3ULWguAm+dORL3DqtOu95KYWF19pOoUuwrGjvjOhvyRW\nmZNs2Ej5r5m/r1A5e6l5MvP0/DQbaSK8k+IIBrshJvmrR8jayn6ZnqOQoOqs\nEf0Re34K2OEvG5AoA9UgYPVh5lOZGUGDWzd9v/G2GChfg2dP2/1BSoNbelft\no2oCi3pfvaw711vidMxjSDCaoVuncoyFoLZJAruw9yHKteQzotW2vpbIRbse\n2RxmTocN12nB09wFbS5dhtoUVcMnCu+BQdcK5UjiBIQ5OpiUzXRteqHR20oi\ntlkWm6nMaRnahR/WsNMKof+x15+/GGnxk5PoYNAEH5vU6VTpyDD9dFACC6uV\n+6TMZqrYy1axHBoi/V9bX9Zt77WhEO5luzw3hMHVTSN+mJ8KlZ5QGXRQyZ1q\nVoT+DukAXbyHGuwejnrrQr6Y26OFsIEseq7M9Vk/iOpFyjs8Z246KY+ueiOJ\nif5AGVdfrFjtDEHF/K59dlGWaECejuxyyoAHt8kVLO770RzAbVKobM8oikRl\ngI4l\r\n=GzDR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCywFmb05xy577zBgzf35PYI6mNjFYeZyVf1/4o+J874QIhAIQy1E59+3ywViZJahwIoF3Hn18tqiB8EyglLGzBoHCG"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.227a4614.0_1622131431573_0.17559474174332412"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b3d21d31.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b3d21d31.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b3d21d31.0","@material/mwc-tab":"0.22.0-canary.b3d21d31.0","@material/mwc-tab-scroller":"0.22.0-canary.b3d21d31.0","@material/tab":"=12.0.0-canary.8530d3514.0","@material/tab-bar":"=12.0.0-canary.8530d3514.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0346549e5547eca4c47152eae0253d802633b850","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0346549e5547eca4c47152eae0253d802633b850/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b3d21d31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+h7Lg8smPdpktGP/YDcFGgaIJVJpenlG0zRtdP9lijRjlByn1mbe2TNOq9it4CrugaStubtd3A4AeKcBSLWPXA==","shasum":"8cdba187daf351e228758867e9fd1a0a8b39434e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b3d21d31.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr+jhCRA9TVsSAnZWagAADn8QAI3g+JArQkW+/Q1rF4zh\nRhitUFli2A5VhKPOp3wZrSaXG85BgXRNe9qYDjMbErKirZliHoT21ytHDxui\nx7BLmLvSXxhQLPHe6v+gcpyxkxd7rsMR90Sqos26Ftl16yMTwsSn9hJTgOYZ\nz4PC3y68VVcAFcGNZzdfCSUExbFKlf65gCGQR9EYDxhipUItwqCcINRJxzjb\njFG+ttTn7uEW+JNGm7tE5L+Bqo3AZbRSWywLVPcndw1OfgG2YN4mo6/l6feB\nIaat+yXdxznxMd/4NbuEQxDmRySlm6ZDw9FjXxymNmgwsXlzcdESh+Tfl5ld\nXQSHuYnsRq/Zh5bLqpwptYpAUxPh+ylbKYctQhRXOkYzqFO5Hb/WHA6oKZNU\n68AOzvA4fwjn+9UtM2cN/t32xoSbt6uxuwbgfBP+HPCOU0NTBBz4DW4GS7nr\nESfGiC3UwXt1wwvsRiwgDfJwPuiODMDk0u1Ppn3CniUbdm1rnLRnRoqBErrr\nUZIxZ2NnYyh9VYcL6Mv5vF6+NM16ZxIkBqiN7RtnDcUN69rzmBPOj9w4i+Kk\nM4RUfeFjAd0D9fiVWdGwLriAREOcTql1It9/FLPhvQoiBMnMOyvz41jEHsZv\nEXOrphZW+ZvWZ/xMrsUqghEl7XUoDtFtBKJjCVSJHfWHCH7hxNJHAYBMxKdE\nrxcI\r\n=hJYI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuXmODsJGBnAN5Hc9uWw/vw1o3NkWZn2i/ua9fSv5nAAIgArKB/YUfOo+Tu6ZEG7/V9a6d63TTNzvyKJrfJOH2rjY="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b3d21d31.0_1622141152544_0.8995527883930812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.288c33ec.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.288c33ec.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.288c33ec.0","@material/mwc-tab":"0.22.0-canary.288c33ec.0","@material/mwc-tab-scroller":"0.22.0-canary.288c33ec.0","@material/tab":"=12.0.0-canary.00b5899dc.0","@material/tab-bar":"=12.0.0-canary.00b5899dc.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"69149a859b2cb2efd7d7cb7a55acad20d60fbca2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/69149a859b2cb2efd7d7cb7a55acad20d60fbca2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.288c33ec.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RyqLuwINxWfs8hS2E9iO+G+SHFj0xacuFR1WLMZlS/mYeSxNFQdEmLm69n5i9KJdC5QWRBgX6iJe7wvAY4aHLA==","shasum":"215abc540d0e0061f2b12ecae7534a5e4947b407","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.288c33ec.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgt90UCRA9TVsSAnZWagAAzaQP/0TQ8ORxBpYohM8YY1rn\nYS+5TI12t3U62nJlixAdjKe7JuMeRmPoRXMr5zDfUlGyeUCvxF9PSH9ge87k\nBX1K9Y/omIkGakYhzE5EKPdACFtmUKlD+bqCffQt6crr6gAX5R/yuIW7Ed3h\nzSH12dmUJilVxh03PMTQzxW1/fVX/+k0Nd//G6OnjBftOLg3SHDlKAO2Ah30\nRTcGrryYtRQ1+Gglr01kHzC7VoB5sXY/bS2ZrZ5S0R2Q/PWljZ/N0qWQv5+7\n2i5Mthlpt85lx3VG79zw+5MqL9hbCK8botECsdPIeyWRnsYO8lly/xgEreZ8\nl4t8poVxD34e4jA9kfiHhCs0NomURALtOQnHhAgj7qxfT9DVfdwCZ3ZU8zT1\nOUeA0gs661eek/o+lCWwDd2M5uBceidH2LDKe97YfP8e7+Q0C8Cq66H7SN7H\nArHWoP18BVtIzxs8HK8tftr6Uta01TMPMW6B1McYJCn3b7qvbLbGJYalp5Yd\nczPFS/5Npu5aQ4cWVdjuinYa3HjpsVvZBjIo9V8UzBqlb0gLk4IoV3u+LAjW\nw5w1VbtP3gh+YPhd1S3JWToSOBjsgCrGfH5gcZjvP+HmbpSz5y1erVHRvWUH\nhIDM4dHMvArnnay4QVqJygtLfj5GW3dLgc/VN2DVu7ykpL1is+ZqUUOiJycN\n6pKe\r\n=Ch0r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGtbE/L7CNeUflFAq+UIQO2l9ctRV8st44jaNuyNC5rkAiEAj8FUS5pezYf5JJuVqmbAN3QAgPlZ9+T948JlEVgQaxU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.288c33ec.0_1622662420434_0.7921752209660788"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7eb7ccb0.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.7eb7ccb0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7eb7ccb0.0","@material/mwc-tab":"0.22.0-canary.7eb7ccb0.0","@material/mwc-tab-scroller":"0.22.0-canary.7eb7ccb0.0","@material/tab":"=12.0.0-canary.474de7878.0","@material/tab-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"54dcd68c7454a24c791e5bc1bacb53ff095de147","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/54dcd68c7454a24c791e5bc1bacb53ff095de147/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.7eb7ccb0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZfhbegD6AivdDdyTOcLgW3o2W9kN1C2Aemqu8L2JUfmSuy96t9VTQ7yPgBNPPRz4RLZP6sJXV3oX12H0w+to7g==","shasum":"fed44954abaa2be017844e7410c6915d5317f795","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.7eb7ccb0.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguTO+CRA9TVsSAnZWagAAfgsP/3D7isB/2hsUaPYofez6\nyfZAhVx7Ahq2KrShaLe/EifB1yP4AlUqa0hKCWb7jPTC3BbPjKb84085q90x\npjEldhyAqj19pO6Q6Mt85K4NgYb2OgN4uEXdCAHa79FoZsfGw7WH8SWiwFcv\nQF4v0Tfvm5jJYCvySuN4gYFmfaoiG0kQF/DqMlC5kHp851ue6nTAdJNm1jJU\nH1GVzEp9hfxMtDwnFs4Hs10az3L7TXGC63Jn7h0tfHXSH8lmSTERaM2i8//c\n3fZAhBRv1mJ7zlhNK9VBhmwfxrnBafnVSeSQeXCGFKazV9LKpHZeKHtnZaWD\nJf2OMvWcM34eUpovNqKLJOHIp7yRPvXD7FoA9mBwvC3NSXRGuwh2mPyvdvVG\nzj4Ij6lMy91+yN3n21tEn2CIcBOvaBN7rV2bUQBQ56EgvHaRNcOV3R7tMfAg\njd0DrQBoJYoprMx86fDdVuK/lGPaij7C0+a0mbqOwypeeMvPugY92KaVasaz\nmXhzHdlMxgOKDVLnt9DI+L8Ywlir87i/JQKhGUnPSTBypxtrfX+46ZXmcuW/\nis76QuJWk9bAfjAMmm+ITERkZ+OoN+GxDe96ZHCc/k6aLOlCw67PTLa6KSTD\ncSznoNTtHPCAlYcwiveC4EClo9m/4eA+R12wRt+ldAd8zDlRn8bdKqD9vMY0\n1T89\r\n=o++0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFB//50+1odiy6XOsFxB70poz7TA1pP8SA0uCo3OLCNCAiAiedEaSPg0bkl2mhI4frC4MyX51h2OMYGtHI2w/11GCw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.7eb7ccb0.0_1622750142530_0.7566479081416366"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7fcc0726.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.7fcc0726.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7fcc0726.0","@material/mwc-tab":"0.22.0-canary.7fcc0726.0","@material/mwc-tab-scroller":"0.22.0-canary.7fcc0726.0","@material/tab":"=12.0.0-canary.474de7878.0","@material/tab-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"55ab1f053532307fcc5a331fdc4718c7d8e5d8dc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/55ab1f053532307fcc5a331fdc4718c7d8e5d8dc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.7fcc0726.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zugDRtaoQGt+k9K7uHZxhfRvgG/pCt2Qto3jA2FhBJs/xYfT6CjR5rRLCr2hRAAKT+47SIZD2ZCkgQCP385v/A==","shasum":"addcc6ed0907af2eb3cb571f32c89db120ddd8f6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.7fcc0726.0.tgz","fileCount":13,"unpackedSize":43056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr3PCRA9TVsSAnZWagAAlLkP/3Ru1KTHoX7OVpWBmW9f\ntukSqjHlRdKmcIsgyumBoN7eZHLh1dF75aMawnrGNDGIIB4CncXwv7TZrrTN\n+b9Qsi9EMp53165vGMCOlB7n2uaTf0GPKnArRoN9f5899hZjRyyFt45rhRUl\nS7iCSARRLgl1jeBr6Lka6P4Nupc2AFA89ZOc1mDn9dGOC6VDw3PVVDzMxojP\nlgm50sYtkh3A9qbG1bmEyXa2jHmDXsMG6RsESAOTZeesspVGQRNM5O2s8DLZ\nn6bR4CfpDsijeu6FXkEV71AkYsMkvalFGSbAp9YUgYzWUKojpyAM8ctE2NgW\n0n8cxlPMBZY2ZharM0UvmXyUWKE0BYbwstWc9w/4c4qVp1HMkj7u5kNGbk1n\nj3WKBUl5HNhVTYBfNrtqvpanSV/QNYhARNU/mI2eZCDWyedFTdESSEm3tvId\nKgCsMNgYaGh3D/WFa9DKu6nhuOmex94UyA5Ds/CY7nW2pWYjmuHhjDl3TbUP\n8dcwzSRXpx7WPMVn28S0CkdAWR35r9P4+pVPfmKgGrHEBdWdZeIspf5Z9bvU\nL7FV4PKIniVN7EUewGMSvOnYSm2ukx5jlwcETXd9As1j2hIsMrKgqBoThX93\n0SbCtZ0uiRbgLu34l247gf8CFRHDElNt4Ti+may0C1O6Yz1SXOklRjdTNQ3z\nlrmu\r\n=+sor\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7VA9rOJxyiH9XTQLWh2UkjCtnAxGLimRAy9dUfqbWIgIgGi6j1gCvOfPeBrXzlUlpQvQRp2ByR888D3Kjq8o9GR8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.7fcc0726.0_1623113166929_0.1652063902628591"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.220a4e5e.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.220a4e5e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.220a4e5e.0","@material/mwc-tab":"0.22.0-canary.220a4e5e.0","@material/mwc-tab-scroller":"0.22.0-canary.220a4e5e.0","@material/tab":"=12.0.0-canary.474de7878.0","@material/tab-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"43930a9e907fac042066906c7c9c4a9bc26e3233","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/43930a9e907fac042066906c7c9c4a9bc26e3233/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.220a4e5e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-qTXJsNHccCyWXk/TzSYucBuV+1DoVqU1NML7V1DcNDMTbh/OmbgVr2iDBi3u/MwIyxhwsocxjh9Y20kk8+CBvQ==","shasum":"eb59d25291f1f870653ee782bb6b16a40806eafd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.220a4e5e.0.tgz","fileCount":13,"unpackedSize":42294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv632CRA9TVsSAnZWagAASugP/3TxUIBAst3eIhWSRUwc\nNfrWqTZd+6qmhPOHxlbEAaowy7yo9x/giGblVqxR+GF3e9BAJ9IEW2YI3bLn\nzBVb55RlRuwLSSHWf92Ri2n5tqC1SoY/M9tyE8sTW04q+Qz9Sw+3qYWzjVzM\n0UZlnowvn/VAUhhzodxGa4pQd7s0IjRUeJfc8O4SxpAlh6+vXG85GtiiHF5c\nWkhQNhXEsCpws9lVViWYGzKlvjwc1uGebXe9gcOo2oA04RC29qCtPOY8hBCC\n5qFpn6dJ/y1SHOdL9GP98UXXNVpvVmP3/fbEs8Gy9vkvFTBTbRsKdY99GdyK\nawv+zavSGCp+xYVzfOS8UlAGHEkQX45Mq0USGz+DcRjpc3RQyW1+MRnQpmyB\n0+co8PWIIKpNH1RIS818zFJAc+bzvz6JCiXqo2wuPzfMCwPBXWujOnMK8SVR\n57lmIsPIHhq9PX3mazZxjavPTye9BHdJ99BvJxQ+sZG+7jf+hIuLmy/YhmTW\nakSc3wdiHaL57tED1dFnOxY7idcn/u6g/nEl5+DAJjDbUNjjdk1QPsvz3RRA\nlyV+hf8vsQGuwIgwNTj4oBC8jHQjS23zEW2LV6GsPzFZKA4Az0PVzVDnol3N\nhtTAYyemKzDWiujBfhFnAbo0YW3TvaDc9EDMc9USzlqwBwzXYQOJ/LygyzmE\nTqqP\r\n=l9N8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBh8fQwx9DMeInzn3u324pEtvuym5dKrblSOXbk5hNU4AiEAgbdmtMy1MaJ/CN82TZOYWaXo7UjpUJOqMtBvUEA4Agk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.220a4e5e.0_1623174646560_0.19754630243436622"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6b2d6ab0.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.6b2d6ab0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6b2d6ab0.0","@material/mwc-tab":"0.22.0-canary.6b2d6ab0.0","@material/mwc-tab-scroller":"0.22.0-canary.6b2d6ab0.0","@material/tab":"=12.0.0-canary.474de7878.0","@material/tab-bar":"=12.0.0-canary.474de7878.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b5388003b8ae379bc5c274e40db94c05a19d7ea1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b5388003b8ae379bc5c274e40db94c05a19d7ea1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.6b2d6ab0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-PE0ID8I7sVNeqjVNyGc0IpDRQgILlOnrv3wZNa913XzwS+INA6aTj8l91R4bJhuTjiWkb54jShkT4qUdVg7cNA==","shasum":"b549025ccbe14f10d15486a8f5a1bb15739644c0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.6b2d6ab0.0.tgz","fileCount":13,"unpackedSize":42294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv7jYCRA9TVsSAnZWagAANVQP/1PdDbdrmvl5HHT/3Hox\nKpigQoglYwY8elLYx4fcqj9feynKnG0pi7K7mjo6N4hOCl7Wc87PEOhppi+B\nYYx3vpaG9cc6rcyi8wbMK+NYuJ2RbHiiliCd6KzjhLAJnRbr1GoAniEbs4CL\nsM1EOrGTttcbWj5rFcv/R9CVxWrHGeXGtqWZp51ULJE63C55S2uoo6tCebEU\nkVC3n0HiThigEqGvSjkC0vIy/3NQwJsUEbVTYq8CKkVEmotg/iFHp0OHaRyn\nb+a1c6Qjidu/qq7knan/ZE794yeRmj70rDPh8ZiHTtHcYlKHyrtMaBxaTx/U\nencbOBVmDW9mChZQrNsDNtZcoQSed43/fBPjofeJneZog2cxWFa79UFmaOq6\n+n5bXEVEQjoR7UsqiD4k1BnVAWfkPvUTqAJ1MSmXkhqwWD9T2y7QS+N9dvvi\nymCAdSe50hBDjILJS4qua+n2J7aA9eD8cchUaCd3WzfKbIl2XfMVUlm7El5e\nQuqmaf1zdNV3DPLHVLsFiOMHK1jcKRtZUBhPIDTYCAeoZPN5X4tnKB+G0UJk\ng+HfKPcYMtHlovPItmA0zfya3vnoJVk89cjczSr9uDtGScnUidWoykxciTX1\niohFYjxCXxjiWVU/Y87ZNQt97x1Eq2OId3gIjhWyOU31muY9xGFiSBWFIgBj\n6slm\r\n=nSa1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhOzKgwE8p0kOVR4SZbaPskLfq71s/sZbczDYmmykSmAiEAjB7dK86zmH+ou8Nmja+yBKmpoDIEaktnV/T0LVf2I9Q="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.6b2d6ab0.0_1623177432710_0.8004007584978539"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2b20825e.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.2b20825e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2b20825e.0","@material/mwc-tab":"0.22.0-canary.2b20825e.0","@material/mwc-tab-scroller":"0.22.0-canary.2b20825e.0","@material/tab":"=12.0.0-canary.8415ae585.0","@material/tab-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8790f27506406085c946b5033334ea71328fcb6f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8790f27506406085c946b5033334ea71328fcb6f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.2b20825e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ORgnz3fDUn+JDSWmb0WJOKtzfmfTaFdAhgm7QDcHeyuAjZmB6gSJUX3y2guPEVWQy62TdzSiI8yvJaVjOjfRIA==","shasum":"f7d19ee2cbea75ef1c2adbe4bd13be9196952eef","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.2b20825e.0.tgz","fileCount":13,"unpackedSize":42294,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw/aNCRA9TVsSAnZWagAAsucP/0Gyhm3R1fEqgGSSGzh3\nZfJrCZBTSJxNeP1p3dKvZc2LGu690Uk2jlyKqX/glXho89o+ikMLyWxv+5BU\nmtFbw1O5BCr++wQz09ArqzBs05m8AjPdM1/aIVZjoHx79HDypYUK2yysGCt2\ni1F4EztrL4V1vgC8Zpusb3CcQELCduhMi5oczEQrPKUXHJyoU8tz1khrLguF\nm550lzZMJxitg8rYVxGOROn8QSTXB/k4R9ftMEia1M1VYL1wN8yUZXMdFcWT\nRTBdwKBGCH+BYRvlw8KEoh9sKoYBAomRBtVp9nDSRDB14w309Itpdyl2yFxk\npDyZ1wPxLi3UGfOH4QvWoJGPhC/lhfr4OEjiK0YiZ9jxnIoL8Wi/ATcqJTEI\n6m6xHtu6Kbda7oY+BYweXA88kFZ53wsg5ca9ypviu0oGaW+JpnAGwU0cPw2O\npTjrNBk0vbAcXYCe+pyVzs41UsRVI3D0G0cb+WkzlmsYC6vBAWbXGFoOX/6w\nq4QmgnD+i4Lsrggs9atw+E5MA0pxFenog+kQnT3loWu5Ca+zMY/vI88mt54c\ng49OCgbFyTCR8ItSvAfOBHZ7DAMQTGCP/YtqU6wuJ5ZopDmh7EQxxtplSij0\noyDZPWyTZEaLXR4z0SjvKKujrYubUCOHKwiNzMbvhqafAz6po+nDhBY90ric\n/R21\r\n=z1lj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuCjB0PZkMKJzQroFzRRYZ0EU9BknJtEVPMuw5y46QXgIgNi3vQDiDR4ca3l5koVAxZvVczYNqTl5NH2/0OqAiv24="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.2b20825e.0_1623455373051_0.3432926999776089"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.e1511867.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.e1511867.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.e1511867.0","@material/mwc-tab":"0.22.0-canary.e1511867.0","@material/mwc-tab-scroller":"0.22.0-canary.e1511867.0","@material/tab":"=12.0.0-canary.8415ae585.0","@material/tab-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"37d9e0b693215142b4667122baccbb1b6fc9f835","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/37d9e0b693215142b4667122baccbb1b6fc9f835/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.e1511867.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NGjE79UkKFNI9eyhRVKokMejcvx3X7s+Mu/3v2Vwogl3EWHjYFlUKIwN66B/PIkjjCDpXM32zCcDhpMoly8RIQ==","shasum":"a5d4b56d3088ede1c23563cec3320accbdf83a98","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.e1511867.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgxAaOCRA9TVsSAnZWagAAliIQAJAfjv//pzqHipKC2CI3\non0UJhNPTqqDbBSnikQrb3z+f/xmgFLZzViA1bvORO0BPz4xIIBBtcL9Z6hB\n1MaXSjKPVEHZ/ChcsgtW0OBr3Toy94KRt7E+Hn77tTBY1eSXqjPEwdV5F5PR\n0JQ1cd2P7xkyeNneUM24f/7tZ8r3zU0nh0ZRdvs69WXENjavhGqlqZd/lAtl\n1gqSsLn3/FQUd3BHtUu1JDgNmSosbjzGAvDX8U8aGrAMcQC6vlXGsCYCEldB\nlmwjUW4Mw9IqOmEx4ct9fyXR8TSTQdTshObtZKmwpiMiLIOnggfBJ5LB1h5i\nkW96P/n2oA6cmBV/Qqus0w7jxpXVsZmwcYqJlkHdkzvAdbDfR6QLX2N0Nng+\nvh7HD3O0OmOYzzdSAHTWRSzSk3WkI9taB8CR49V6Z0T8+/fDxGI1OnDgDX7Q\nWgvA0ZAg/fJZSppFdfTmZ/JCai30rNTjml0OywlaOMNLArkc0DPHXwHM9B8q\nXQgbhNQVo3/nhQNA+bhgzcHBd8a/qwfNKnXecB03jBrjW1cGd39UypgOVhZt\nNnMFYoyLFzRh81d+kAHVpmDEwhBzzL8Y2GZF21XK3FR5tRDczsBM9ktbnuUs\njBincQfiByGaryGb2oeEK0ZfDGb4k4CwbR8048LQWdxRjw7Tu1P0XbQ8XGHZ\njBkm\r\n=orqY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCvhFZXiw58RdiJAqBgCljFIePKcfOsAkH+8Lc8xesAvgIgX+hY+eRZXEnhC6wE8lSNta/wOQU4cYFhM7v3ZE++Dww="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.e1511867.0_1623459470434_0.1781424644736187"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.ef4a0c0d.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.ef4a0c0d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.ef4a0c0d.0","@material/mwc-tab":"0.22.0-canary.ef4a0c0d.0","@material/mwc-tab-scroller":"0.22.0-canary.ef4a0c0d.0","@material/tab":"=12.0.0-canary.8415ae585.0","@material/tab-bar":"=12.0.0-canary.8415ae585.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/97de9eb21ffb99cc05f4ad3fe8dc24ffcb569bcb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.ef4a0c0d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-U/cvsxWsUi8yWI1uYPC+lJ1LylpHwL5AgVYDYRb0G0w6wnXkBz22MKm0blQNgIm2RnaB2ODPFjyEuTNUNYaQRQ==","shasum":"1c9e72232d3b1906bfa8d94d696b07de4a4f7e61","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.ef4a0c0d.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyQT7CRA9TVsSAnZWagAArPYP/10m+UxMDshCnGPwj1CC\n4NTVPjpPZm0Xe4XuLppAXN1QjSF/Ikp6YalLMuZO+6o5IbCuWcESQh1FuI6V\n+mOaOS29c4CnVb3n5+1G5iouLzzO5VAhQuZCoyuqzMlhpfrSm6seJisA51f2\n4NKuUpJ//GJzovNv0Sw1Q/aPoXknt3jb7UKtBRayTbmRXjZyNkCjBF6wpOlo\nhSWc5mLH/fYsDxaSYjEgv6q1dtJoLSBNwPweuh6FRrk8gnbDjOLlt52NsSRx\nSxuDGdZ4ehO2LnBRyEwibX1NYMBzApW6HyXD8eogQJotS0JLVR6kealOzM76\nRI7UcCfVvh7/0grWPzMNJIEUVpB41HM4b8EyZ8xpOf3TwfLu692Y6TS7rRhF\nh/vXRfE9Lf2FbeBgRcpeaHUmh9OsyNvReF8tcjVB7fpw4OA7MdtE+LVYRpmI\nmEtj4EmD3YvcNQ3IJeMTCv4gxALiqwIzX6+rHD3+uqzwR+wtUzzg5sDsg2fl\n+8BsXJ0OwvU9RTN8eIrAdcUikKEGi2DqbBOswYoDYlNU/UGmtOd9w31EJATl\nAZFWZjKM2sAFYH2ewgEf/DHW113a1p8FIt7O/VGGDsKk+zqu1B5bIESTxtxh\nRu2aUp7QhWw4K/NYohVhWQHNZjBsWMvUFCtbfv1bIoqFfz0xzieUZeePk9Di\n97qS\r\n=JosD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBq8f8+qOjo2l55GMdtvgyhghY1iEf6N9JzrIk//YDVnAiEA72Z6qPUHU4EB6dkxDLOHXTNw+dXUJXZ5WHAJeQ+wnq0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.ef4a0c0d.0_1623786747187_0.20095627805578675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.573d8913.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.573d8913.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.573d8913.0","@material/mwc-tab":"0.22.0-canary.573d8913.0","@material/mwc-tab-scroller":"0.22.0-canary.573d8913.0","@material/tab":"=12.0.0-canary.f705e8048.0","@material/tab-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"13a9b9717491f67b5f5a219b279328890c0c951b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13a9b9717491f67b5f5a219b279328890c0c951b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.573d8913.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ugQobrcKqEkg1lE3MXAWgyPROYGTyDM1xM1fn/6AK78DpkN3BuVFXmMRnEq4u0DN8V9z4qWwYvDdrMwMH0y38g==","shasum":"e0d1c5cadb2ee7e12b11f7a341d3354cf35ecf2c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.573d8913.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzSvWCRA9TVsSAnZWagAASasP/jLPq9CC8erXiIw79qDO\nYFwKMqIucPyvN+81crlOQ2g+WamY87gRfxONEa103EU/7u0SyNfPXYvJOl2u\nMbnyVAAkPyYivjqmHHX5F27l5zBXG8J8Kjmuj1Vydcidr5V9xnYJgpN5wPz3\nCdlH418e2zUkX5VOxLEJID03lKQO7lHi0F0p3LNrqd7YVGZQTIyELvH2rpiB\npkXgii+Zq/pHiTyW8LfHpJB3lVdIyQUBQrHzZV3Wc7+wPvbJ/b7MRIPCmcut\no4K2JW7CI4XTTN9dG6KXlXXbDAb5qEKUZwK881q9pNT3k6chd88pYFP3VkzF\nuhIfdJltkJokm2g+AsmW2k0wdsDOAEAC3FWmPXMFKtXy2Wcx8YMJCIv2NY9a\nwcM1Al6uWX5nQjkQe3EAGFHPLLlKW6DAsaMp/HSVWHZ5oA1EOR9ILJ279SHa\npBJyI0UZVARStnFmXzSVGL+iXdir1TVlGbn/uGn9KVRrIxcnhSREioEme2Ql\nnPZkgrYY7vVLkXKXvlD9CyAYCb8mLXQYN3STvl6MlR0u49YnFATi09RlYbP2\nwBsUNEWlY14oyuHUmbq043Z36dsI5z069hLnwFI1nREsZ+McN4FuJA8o42yS\nhbF5P8IAi7GW0baRBde5nQo2BhyV7rWjp8epZoOmby9Js5G0CztieiYaxSrL\n8IQQ\r\n=n+aU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCOTv0qOMAQZbDEp8/UddPeBB74MrTflNCEj0jURQOxLAIhAIVMNQLnIlIs4HyrlpIe7f4bNTzl+h34hL8Q937wzldZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.573d8913.0_1624058837559_0.3543412971943185"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.21dba001.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.21dba001.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.21dba001.0","@material/mwc-tab":"0.22.0-canary.21dba001.0","@material/mwc-tab-scroller":"0.22.0-canary.21dba001.0","@material/tab":"=12.0.0-canary.f705e8048.0","@material/tab-bar":"=12.0.0-canary.f705e8048.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f26ab3eb589dc34a464186e9b323c9a9bd20fade","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f26ab3eb589dc34a464186e9b323c9a9bd20fade/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.21dba001.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kcpJngXEtfMIv5FVbNX3Bdk0O7/CrvuiOpNwdKz276rIsBKGog5n34kFIlBz0EtY2dn1lstmXh4uQh4pCQMTGw==","shasum":"324207bd77b4bfe13b144e4faed9b4f6305b8ade","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.21dba001.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Qd4CRA9TVsSAnZWagAA5mgP/jNayLxC7ZEE7vtu7xVG\nsgJCI0wakhUcMDN1GB3Soqx5BWn2xbpPc4wmpkMtTHVlA/cExivv3pNrjGRZ\nFUz0x0bq2kahJRFAe0cOM5sPUkXrwd3GiieRSDzTf8gf5WKn02z55PEyOxZM\nhF9Zjyxuxv0fmnNlWZ6o7ZjYNuqoPeAveFY7JggY/lY0fWHQCk0sEfhAS18O\ntnx5bJS+odl1H1v3As9hIL2r2+i+IvrIooI4HsAIj4/0eKlrRtJCAMrzpBmg\naUQeDaDNGOFV71LZIdEYNtp8h7is9DJ26y0YQhE+aXibpPUJofA6f4b1ViwT\nY/nvYjT5Ao9DUFqMPSrImbdskrm0Fd5mXYheLJ3S8K2fBwbTwY1FFbvWN0ye\nbBBBNXgSJwPGDZ7L/IMujHDs9UnHgZe3ymebOgtS2ZdT2sp31A7eNf2ov6az\nw/u8YKpakqzbKccPumsB6KvnppR9WiV8TmB5vLHkzKQ1vwZ7uj7LqgFL1EK3\ntV8FZieneHXNeOJ0mW2Rpo2pj2q8j9JgnD+CNHiGpazAVQF4q8G+2eQRHDio\n5BBR+KlvBSIDXyXDPpvYZgv95upL2CVrGmCu/zw8m37VARMZQb4N18UhGcfk\nBNy30eWMSL03j3bTlLLg6SRAFcqBsMKTsY1QAic9z3BmJht+6R3gYEmgrl+i\n8SQ5\r\n=S1BZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC9/b2DMa498qJDT6NJk1mmMMMasfD4ac+coyi90nbBUQIgH8VWaZ40oYA9j8gjvHak16aSNldUsk0AC8zgn7k41PQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.21dba001.0_1624311671864_0.21075572263075237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f5bfd0f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.6f5bfd0f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f5bfd0f.0","@material/mwc-tab":"0.22.0-canary.6f5bfd0f.0","@material/mwc-tab-scroller":"0.22.0-canary.6f5bfd0f.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","@material/tab-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"38e391cc489598145e8956cdbc0a234563260efe","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/38e391cc489598145e8956cdbc0a234563260efe/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.6f5bfd0f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VPw2t8naPqKRy3+/oIGVo7o5y7HfbEtkNnzWUw4KIhiR4hkWQ5mKbInsIodYAvWll7KuGvnHkAt5wjV78qU1aQ==","shasum":"aa66c3d6379db6c8d18782339b97c2ec36124f11","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.6f5bfd0f.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1Q2lCRA9TVsSAnZWagAAqjcQAIYKXxgJ5fdzEJQzzRlV\nfaWh21qJZrjuyhKEPREl90qYIuBUrtzkg5T0e2KQRcQYwGGr6k8JnXg5ZOLZ\n5ZYNvwKzeRifNwQUwJth2LvJqUsgCQilP0zahqvmKcjgUy7aNOSxjWjTzMNR\n84DiPZJUs15WSKIoF2gb74Oy10NSKJVi3WG1f9chLhAnCwkGbayDcJ8Ips//\nCnhw59tc8GtE0H1owfj7TQ+r0NnW96q5r8aUSgUWIXBmUobln/KHw6UIUlnc\nUNqXKQnf0IWI7GOEVNf35YXrV2juNCYOYJbha74oM8nTuHs80+YUzHdHJ1qc\nbWILjE/2PhDUcoFIHUMvkSDo1uu3gtMfFgn5jU2lkNwgcaCFdr1x5KmsK/MS\n/L1BWEUCY8eJ/GGWF73uRT7g8J6iE63D2zHZhUjPMH9XTHNAOrUe9zFgxjWN\n9gYxGEIm2RuXWidvKvgQmUqv/5vUoS1gtoK4xw1d2i3NZd3ATmqkEVJB/ktQ\nrSXW+fZfb9UfoLH/lr9Z3qIfR5o9+ishGf6Bhm/MP+NGMJkQaURv7bFXuUu9\n4r1EXwGvDlv5nOcm1W6BOWCv9WLPxtp5rrFDYKFAdlmt4orX0ym0buwTxlQM\nQKO679hBYcUz9A1qC5CAt1LBJOYcptWzNZD601Oqo14qPRAJnclB1WOGY4zF\nFyQm\r\n=DuEr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCA5MoEES3gLm3tsnJrSN43mE6ASd037KjU4rboDttLDwIgM6X81wP9cNWVqf55JvhUp/1n7WBFiLi/tlsxDZTqbNk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.6f5bfd0f.0_1624575397297_0.10038533395329385"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.fd8360b4.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.fd8360b4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.fd8360b4.0","@material/mwc-tab":"0.22.0-canary.fd8360b4.0","@material/mwc-tab-scroller":"0.22.0-canary.fd8360b4.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","@material/tab-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"652b3840a450a965d0a571d3b055195dddebc8ca","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/652b3840a450a965d0a571d3b055195dddebc8ca/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.fd8360b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-16KJba62mJGxMb0L9Y/KJ4WZGslS3HKR6tIRWAe1rHP30LohtCMTZqRnGP8VzPDgbK8XCCyga/wBjEBQtTfxyw==","shasum":"afaf3d67a970b1d78d7f75a63eff4e51243a4632","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.fd8360b4.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1in6CRA9TVsSAnZWagAANukP/0ecKyDx7IJm0XOui9c/\n7ZWqtZybNf5bnkogPMVOWxV2DpEis9ZBlCaCMXtKX4rp2Z67gYedPq5rE838\n+BXSplvvEq24cqYpqV38bR3NSO3TnFDdfkfmQ2Su0p8pqJGY+SQVwNTFcQbd\neD7/Oqvk7BcLlhbppy9+Y11Sh+dWnQpSbuVSkq/GZfzEmNMVypiJvjKaBgoK\npiFaSWxvD36zsg8Wp3Rm2n6vYDqhi4BtAYJEFoPHL8Na29y/6JY6SCH7244R\nxw6QAua1H1Bcpn+3x0dKi9J/wDlB+DWCeBjXUI595Z1Ubr4VQ6jPgeDLu2+V\nE1H2XhNn0a3OwCZwwnQbnJZTjB8RLDBGGzpmddkkxIlCK6+PE0M0HMpS8WPN\n2ceufFjYC+Ub3HUk5IYCcPk6Nc9Y4McyDZqIlcLyGE4pupRGsdRX0DthXgmX\nTiSbs3nU/yNNApRN8fHt0kkHEINxQSzC2USoq5GqAX2qdPIgZJ7gf6PQup+M\ncOMTxjzkruH7ksAaBs/IXL0l+Ya45baZU05jzKFwLUGBF8OnklbkwUaR//AC\ni4rM+uVOFrCnkdcEmYMXAeee3bqimA4YaisbtlOeKG2jC4ZIJNpUARXBuU9b\n4yNJ5NH8vJyWxEn3lJAebPpexNDPoAb0mM7xRhn1Ag3G3m5naRB66pKm5MNe\nnWJS\r\n=w+I2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtBJjerRqnjzgmhf5M7AZInKxFNM6EqVs5QpbcVyU4RAIhALZ66nc0IQSL1shfAfKKOsZdbKLdRxXx9Amw7FhgQzkK"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.fd8360b4.0_1624648185568_0.33888926553812815"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.6f74432f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.6f74432f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.6f74432f.0","@material/mwc-tab":"0.22.0-canary.6f74432f.0","@material/mwc-tab-scroller":"0.22.0-canary.6f74432f.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","@material/tab-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c9a217708497c2e16eaef6de3d1cd70873d0173f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c9a217708497c2e16eaef6de3d1cd70873d0173f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.6f74432f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1w2WEJGW4NtORaky7/gqPSTyuFSUKpbeFu3/uqLfxQAK2ZL7etOT7PTNgjRb2ho4m3JBmA5mTIehv7RLO+PxWQ==","shasum":"506592fc788cb701eaf37f5d7eaf03665ae6c67c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.6f74432f.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1kDlCRA9TVsSAnZWagAAsc8QAIOy8i3CSks1IVBvWsSl\nyvCrL38ecURVig0yuv8dLN9vkpLWKtzuMKzWZfWWJBavcR51jNAFDkJWPcfY\neMzvY962yqs/ggKavbXL/2s7pUBXIkIAMZ9J3he1HRFRLA2kUEhTzHDRbEhE\n3aooXsPtL8Dq4aoxRYX30fNSrzunWi+uIWttpS4SL/bO/caHLXvqZ4gUpW6u\nt2k4h4xG4QNEpg+oSsKJEiaswtb/1R5VFojaj/qBqNpUJ0v2MTLJGHYTKocM\nK+bQZ7TepklCfEoNYQwWCWtYXxfkMYjenr8DczaL4t2DhpHvlZIth93ZnLe4\nRW/Mpi5Lsjc7ZJ6FYuT2ODpOuLmMZGgxaObFd/5tl/pEYUBldx3D6TYSBabz\n/yyN50y19q3WPJQrnOCLweRy1JfvbJJ0V6iJzI/XXdYV10wI9w/tbJfxcYsF\nm0Yfo4KvZmYL5U8IpnAv2hmTS+m22CTHk9YX0fhJvnWGo3oIy6rx0vibRJqT\n5LmJyoD50Yv3KWg03gHZ55BDU1OtqEj7sdIFx7UwkWKgIsp16N09S8c6D664\njbV7HDt0SIR3IKgnMbOBRMTPR3/ZsjvDZwhX6jchzVH+teEHTSr5q1Pdwf1F\n34OHG4kp73dMqfesFi1i55Ry30nwtgrtKGgmU1P/NYy5cXt0ciCEzPfnOprJ\nar3v\r\n=VeSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBk+wxqvCPXFRK1+y4Tq9P/2B28Gaz017MPPP637MHOnAiEAvlTIEibJc++qPEdVv8SNzuGRTbopuGk1gSO/ZnlNRZ8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.6f74432f.0_1624654053084_0.8334556419514083"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.b62f901d.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.b62f901d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.b62f901d.0","@material/mwc-tab":"0.22.0-canary.b62f901d.0","@material/mwc-tab-scroller":"0.22.0-canary.b62f901d.0","@material/tab":"=12.0.0-canary.4ccd39bdd.0","@material/tab-bar":"=12.0.0-canary.4ccd39bdd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"05d3042d6ee960a41512f4385bd22af7dad2331f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05d3042d6ee960a41512f4385bd22af7dad2331f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.b62f901d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-frHic7PLt2N/frfHbGJnqafO8ZETVSu1QY94TbxpokFQNcqxMjbr6h6uL0+n+sa1y1FlFQCSk/j4FSi7f17NeQ==","shasum":"bc400d97ff5225b23061163b7e831869bd05a6cd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.b62f901d.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1lYPCRA9TVsSAnZWagAAV7wP/18Uxmz6BXAncQEcrxfX\n6t8eHM/y+7q0TI0JVCe53v+1L904UjpgR5aaoNN7GW9brvnPctKpgzMtkF+7\nRa9YeZzTLp5/cylWodSLdPowpMnozyT4/o2/stvc+lEFqNPYW0PvRQYKVktK\nvL0zSAD/rQgvJxWAyll90gdyTQ+qyDTGPu9leNEnDkRFqwk9/DEhVLi52vx0\neHO/xXlKil0p/lXtqNFaGGxorNErZUbXu8ffeQEaXt/Y/NdxKnpBi7CUZyaZ\noxBc8XRU1wTl/Y6AP2aaxKbiiqSdbgW5UkSO2cBGd2NLHwojmZSlJJ64/f+x\nrvw6VsBa3c9wuuMZwN6z6ACqsU9/IfxDdDXpR0DCXlY5V0dCqa7txwMGQBTg\nAZ88Paj/hVoNs6Imb19fJacemvq3lo2ufuGnqEe9bqxLADnCodkqibboNge9\nDfW7Iiz62FW46PrUcHq0GVBbFMEBYxsKTn87cp5ScyCoOJwG7ijj3oFSwJ32\nybhAYaGHygB0Lyvww3LqKjDlY69Qdo91VMtfezvcN3nWDvXC82FA4CsUhGMH\nqKT16Tl6dpujLmDLx8pW4Aw2HgjbJIm8FGgJC8RLU1r6YyEx1RSMZFf3MFDL\nIRjj/ZpoKL6z7Qt+xXjYCBeAxvsUqTd/k/hHqj0drRcxetZMjnxnkaWkoiGt\nGdst\r\n=nOnB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFNsW5Vv15VJNrnQ4A0w7GNae1nicqBpDCzEQ97BdxoFAiBGnRa/40ylcKZ3OMNDYIM2j1f2FlGXz4rrDKvBVmbebQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.b62f901d.0_1624659470967_0.38918551624699904"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.73122cba.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.73122cba.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.73122cba.0","@material/mwc-tab":"0.22.0-canary.73122cba.0","@material/mwc-tab-scroller":"0.22.0-canary.73122cba.0","@material/tab":"=12.0.0-canary.4c80072fd.0","@material/tab-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c6a144cd9623c2a8e58dd87af0807c1aa4d1f5e9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.73122cba.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZSqWJ5Jwul0OFrDzJ1HmWwxlQV6MzxbHkVPAa2gjJgxQ5F+RRHp1KlrOeN1dJzovAeFeOxjLF127NW9a9O6RRA==","shasum":"b799a1addb7172d37c451514b8cf494a6c00e2e1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.73122cba.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3Mf0CRA9TVsSAnZWagAAkT4P/1xtn+CEXGQM9S2WRVOm\nxoEtzp5yj7d5HP6siJwHOYTTkPi+criZSL9km8eBGYamT3XTtELUcr+kUdFy\np/+g7nR+E/uQ2Nhnkw9TTZL5oDwGu8IsEfLeHwVommlHAty2QQOUPydVZNTu\nl/wGA2d6/Fp2iHcm9cVoXoJpNZp2MgmyIl4CQZxEyVLUplhXwvP0PFtnXzVD\ng011ZXjQuI4jULdGXfKLQtZbnUdcQFhNLIOBKQ7YWGDgc5+KLH+BSe+T2DQX\nXUvNtLHUh6069S/baz3gxi57elAc/JrAAJb4lmzFieBw8b23i401HBYOCyxI\n6rEE382pka9kh2S4SvtM7R6zj8Z/tnMFY2ly9MkyKs4mD1w91xCGQIfj2aAu\nL+c/BI7cKxtjqbftGE//xHQ9eHf/WcZbeXTWTqpmlYN+vfpSK+MzLFDRRiN9\nKlbwJYvdD5B746CA9K1h3U2COFVljcGQfYVPk0R0m0tpke2ERxrAk9oAghWo\nwxX4AYL52Sg40IHJDhFDAjGLpRuWotvfdA47clybsBQWlSwjiu8byXglbnSs\nG9xpI2NfZuF+zYPS6xCb4+s/+tDZzCj07kolZ781HDVjZAcayXoRIJyx/G4y\nxBByvCtzdsf+Y4zCCVhXY8eGOHgCZJoFz3uu72rV8jHwHMI9PpT+D78176ia\nkwKt\r\n=HmKJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDW2PdYPEk7PHdzydL22uNpTLSPk1MoUskbBSr9o4KFAAiBLCW3vzsgc965JAuu+egcEu8eogH6Id0krOnqvBciJzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.73122cba.0_1625081843923_0.6455867740179617"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.a6912af5.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.a6912af5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.a6912af5.0","@material/mwc-tab":"0.22.0-canary.a6912af5.0","@material/mwc-tab-scroller":"0.22.0-canary.a6912af5.0","@material/tab":"=12.0.0-canary.4c80072fd.0","@material/tab-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34c74a66bc7e54e1165edb13005a2923702f9e8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34c74a66bc7e54e1165edb13005a2923702f9e8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.a6912af5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+trNbgwgzM5ZuSSuGkSSR+sl4J0zmarrcBBdNXfJmFdvXySwsvpzKgEVFEz0ucI4TctFS35Evhl+RXvx63W10Q==","shasum":"c2e2f6184171cfdc78ce67a36ca6d53ba197ef19","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.a6912af5.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3jTtCRA9TVsSAnZWagAAD20QAJxwrZS0MTVRLnR/EIQl\n2ikNGv92n7TM3+uy0t5o/yPCEToo269krKiJhEAHgog+buR0wf9FzSB/GCzn\n+PCSGFK7N7WveD3zQ4A8k7RQoAn5dMnRomwMxDY5BEceU7GPub84Aqr3qQd0\nHCt9+did4Lb7UVnALzlqgloO2EzUDRPN9f/4mDi8CzsgWSdZbOqbudW7PyGE\nNB6ZQL9QNqp5NFMIMT+SQjRTxNbS4PlxK5zWYbZ2FzRuIYMv/7fdVpL7TF/o\nID1WZDMahz/dl4SXPER0INwSD4yFwuncGPBmIUtq6bsKBs39Uh4pAGRLJzfh\nB0lxNeNm+gqXHEJHdGv2PaXr8LLaJJGcU1UHezUwefyqYFAYAJcGbgmz8P7Z\nKiQqkpNE0esFj2QvoASfC6BHEEYt8s2E1NE8hRjQ8m38lIqEADuAUkqzpoO8\n52knbzFWDj4rIp7I4RymRuKs5o8cnNtzt8M8XoJn9OQNcRUNxaZ1BwPFtosp\nJXF7pWXebGU24DQbRjhnA10+ivooRnLJeDTOpgHKM5imLbLYsAQlGKepv8BL\nmZNSTtmENb3+MQUFU0I6KE2U0lkVJ+E0q8hC5KnOgAJs17G5yDvw8Nr1N2S3\nEdl0yjsYZSI0qlqMMgPqpTzyqYi1ej0L1PSTDCLSEzRneXgrBe0/cXSowhSr\naXqh\r\n=Jcmt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF7WnSSEetJGYnAZcxMniv0dEbKHZz9ZaAVUx/s5Jk5RAiEA7zDkGuRLPGPS3xBaSPfszC3jNlZTQJBis4Pwtif148M="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.a6912af5.0_1625175276733_0.1527771790101533"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.134f24bf.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.134f24bf.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.134f24bf.0","@material/mwc-tab":"0.22.0-canary.134f24bf.0","@material/mwc-tab-scroller":"0.22.0-canary.134f24bf.0","@material/tab":"=12.0.0-canary.4c80072fd.0","@material/tab-bar":"=12.0.0-canary.4c80072fd.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1191b29dc7fa661811a1c3960131fce8394fc84e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1191b29dc7fa661811a1c3960131fce8394fc84e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.134f24bf.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DS1OqLaRKdRwN+gh/5ZF5MlUic2udtZFU8QjUkq1Y9S57JETpdQt7BD0BbS0Lgoh7xcHk2AgkWpQW7m6A8qKPQ==","shasum":"f730e6f4f4d8587a657803174d2b4e0baba3fa8c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.134f24bf.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3kKZCRA9TVsSAnZWagAA5RgP+wXC5QCPo40l4+1s9IcA\n8jqCyQqOzP5lU3UjCyQ6VlAgGgbzMdNlS/HPZtuZ09hMUxlBnaPZponYiugG\nI17bLit4wWZ1CHcH9i3KFKh+by9RhCqpBq2OfqV1u70cubPqdCbxYwEjMDi7\nJ1FfEJnlLPJoeE1RmqtkRNQw06d9EQRzIa8NBuimxDg2sV7tPbu3bEhbNB3r\nUi0erQPvv3DaNn1AbvodtufNOJrrrCgO2M1sQGn+reRQBmXWCH1yxBntNFDE\nm8MA/pt0wVwJKi3nCeIM5/ira2ztvrRJ8Al5tHfJjALV6MPxYmMiRyiw/Lth\nbdI/2IbEkyzhKZ4iG9JZvDqJam8By0Rp0W7ede/ImhcObqVjN9IVWCrImaIl\nZbI58HYltg6P+sSq9CZdFPLNf8/v73cBPjjYCSgMMjgaZKIz5lgN7/KbWEb7\nYfm01she/h5lJr4Cxh5oDI5ZyyGCaUXk5wfGV3oDC9FqJBzujfNrFSMxdzCH\nrOgjhWrMhK5foPvZuR9613INO1gRew/ToSlS24PYHXwXgRp3IQ3KegfNYM0q\nqQ0n0kCvRjJM9U8vt9uky9Zu8N+Tpo7I3pmzGom/Bw5mM+j+qJIEsMIS8lp6\nhPANEHf75kxm8ed6JKVfhdIBh5wRCmiyffsCFZrebg1AYTq0KdM8p1frbJgi\nIHqG\r\n=268E\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFX3hZSvnHZzvW59TkjMZO8Z5/i/tQN5y9nBh2gKaQUoAiBRlN/AOIpwTUaiulsh+lMVwp513/QdgDxpQTcvK4bMXA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.134f24bf.0_1625178777340_0.11095491597308849"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.1debb78f.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.1debb78f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.1debb78f.0","@material/mwc-tab":"0.22.0-canary.1debb78f.0","@material/mwc-tab-scroller":"0.22.0-canary.1debb78f.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","@material/tab-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"05e5511ca831a84c47e7bd43f685202e9213b33e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/05e5511ca831a84c47e7bd43f685202e9213b33e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.1debb78f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FttP9fevcOr9XMMcChfxlnOcy6me23gG/fH+rk84BuTT3WXZG3xD7+Gk200+BUUDHhQCLwROVQtrXh0yht0SAg==","shasum":"80f2813d3e713e0e898b40b227859df9c738c7e7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.1debb78f.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5PmECRA9TVsSAnZWagAAFNoP/2mW/Y3f3L8xhNXTr3Dw\n4uFnSs5Fetoi5c8CFRlISogg9svAobjL+VceLGh7lwcJMQsKNQafVlzJjnuV\nbb5sEkrLsAdrQW8mccCQAGvhuQmiR6xJtJ9HLtFhYKRXbNI7occCRiMQU2D6\nvbuyX8jsMBiJ5BgxLd5welGbY5GPLQw9/bzrK0vV7zcb0DTeeBTUiTPKa7/m\n1QLRNgMLCegitw21PtEn0y1XJSC7qA9TZA935m1SoV48DHKZQk3vnfFzXGCJ\nNKpj5SjlHoinZcPtFIvfyhXRLuHJYDMgHGCTK9YgIIkEPiSK4ZwS+ZoYS6h6\n3XQvpdpxFUWa6M99BQKAY3jh5cLUqPgts7Pq2hjUKt8Bff16YB4MV8uN/PxI\nOWE866vUWcTKIHZU7+fb8qZDxUjEALbJ7wbjFyoOI8z0kHadtgk1R2Bk0fl/\nI7QpJJZ+XpEIQVfm6l7eOMdRiEcWLVKyW2PCbDenLA1bnUrnG4wzqzrfpSTW\nMaRhWFvWbznxiAz4j2FAtfvSjaDdJoj1vBqWD9CLq+qJXsbdRFbNXQNnztQ4\nbey2ScYWYpnbli0XkkD8WE/aM8EUzBX6kIj21pDSWCKA9qWHI0DIi5wjMhG7\nsvWfad+2WmzMHRgoEqnPGJtvsRZaW112kVJ7tq5w54+WfYFtBWoKzzZmvInH\nKwzS\r\n=x1wN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICGeBsFD78c7F3+nOYBUeALuO0rUa/SgznepnRZGAPR5AiAEsvc8LDkBZeND2FwopGKhdqsDMO4HJ9zBYiMVIcQybA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.1debb78f.0_1625618820392_0.8740405782136202"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d53edeb6.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.d53edeb6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d53edeb6.0","@material/mwc-tab":"0.22.0-canary.d53edeb6.0","@material/mwc-tab-scroller":"0.22.0-canary.d53edeb6.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","@material/tab-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"becc7820ecd046cb48666a32a633b8d9f76f2980","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/becc7820ecd046cb48666a32a633b8d9f76f2980/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.d53edeb6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-gzdku5aB5iEarbxvI1TLWRu5Ah6v4tNGlFnFT8uU5HFxddiCyVvsrfvnCCNafE7CPqC5Xu1P6Xwrz+3SBdDhJQ==","shasum":"e6946ec2ca2ebb59ce943bbad1ea57698ce6e1fc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.d53edeb6.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5d3DCRA9TVsSAnZWagAA+BEQAJMe9LQlsEVbfO1qXicl\nPyEXpjeXHEUoteOQODJxOVk/MX0VlUa1SqRGh0ilp4S0Noi+1bQf9w11yRXC\nmM51+MJY52inQV+yNkZLhF21wCvzMD0zTPjgm/IbTaGQwBPEA0tCgGd8bZWG\no9Jih9NZ7hedxWLMlz+cfuABe/6eYmnVb6zuyNBcujL043NBWjHtUE5as+hX\nNDh+lipyw+96EDcZqkk+eoYk5fvkF3VEZPOgnBPOykdOqG/lSfDKZVuXG4A9\nOSS2wqwlOmSKM9uUOwYBz9NfWdUQcei7zFyYdD2Ihs2GLqGZJnk8ACX+nfuj\nMmsquu/Wdlyyte9sKLlSHN/88LDAEo6ODL6SIrnzzWDicLKcMwNBcu3C4nxy\nRBAtS31ip1gCKEW311uVniPWWjmXFq2Euye8PdJm63iyW4Fu3Z0HDABYjZPt\ne39aW/6FRJqMAS45KIfmtUzSmRc4DNI7IqT30z9KXXcgNFWI3dsXsgqC8JjF\nYtw3dOW1AKnuM+6ZXwKyuGaoARTS3KL2zS5nLraH18D7RFJ6qn+9k7vhkeD+\nSSvug4XuDCqKYh1Ra+bXKG2Ovc9rzC65FzPRWWqj3XcESqiTXMQe9S7ptG5e\nY9Y5A7YKZ7AnACzDruoxIgEfgwkq5WBI+N/EDu6cXvo4giuLKGfNyZ/6Jk1W\nekeG\r\n=ajrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICH+VAqXmhBTpMOXyfIInlJBgpYa7fE3k2SPVZeHKX5qAiB9cnkspIyWXRhk23tBVLM2H7OVsMa8RlvwlTo2zqCKZQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.d53edeb6.0_1625677250871_0.1530454569949553"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.2226489a.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.2226489a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.2226489a.0","@material/mwc-tab":"0.22.0-canary.2226489a.0","@material/mwc-tab-scroller":"0.22.0-canary.2226489a.0","@material/tab":"=12.0.0-canary.d0f9f3f2e.0","@material/tab-bar":"=12.0.0-canary.d0f9f3f2e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4ac660ba00e610510de0d1b8c86d4095110ac230","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4ac660ba00e610510de0d1b8c86d4095110ac230/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.2226489a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Sx5PJJcerDr+HW5Ae74DvpjtGrBhOrPhW0fQOeKFcpEAxji4+oSiI9NeDvEztWHg8A7RjZMst3TqMnF94fs+gA==","shasum":"1569439a6c164f508a3f3cef82a3706ff92784de","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.2226489a.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5z2gCRA9TVsSAnZWagAAGiUP+wTFEx6rsajfnzMmM8+h\n/hY5H8du1pZSb+VTnjM79skhNES6NIDqHZ+mti6Lk5cxSfzPqEacMeBTw+J2\nzL5jD5rnVXJ82EHnWPiWl/MNaSLgMcghypPJ1aNGJQCC89UHTIWbiJpPCqNo\nH5SVPjO1gVJ6CuryAuHHviXLTv9o1KPrTFWJW23gZXjOWST8Ckw0WHD3cYzh\nMKRVvFJ+X2+WMGeaPoQLACuQFGZqqk/RKRcarBHK3k7XjOL/2/VpshhqIyZD\nWKJ9L/dW44g2Ab/0T36qK3946cdVN6qvrrVwGkaL0sm5To2hYX4Q9tMx5qKt\nQNHfS2BqMC3ZmEdEHrmxmU15C9QxGI8bs9h7YA5i0rYb6u5+fQQhWLUklvRL\nW/PV855LynU1dnI09PeFlDAnwdxHBN0liDGjAPIG9+Kae1wUiwdgs9DPNxb7\nWnevGw5CJZBmgV4h/SoDiEcH6+gk4CpCxTX7FVOccOXuaX37NUEob0qGJoIQ\nbNPo5MiizrW6DXAS8zUpfPxpW05PCkRJC7z2Nv9KqLscc9haI8WpyoUTQFn4\nOtQCej8Vlab4ivErI1QdQvaX4lthYJdsKivSDFnSJb+fPJ+IfF25M+wVtmep\nCuhFo790JeYAKB8QMt9vyT2WDX7ROWOvSi+2R5OSVkFuPDGOIGfFl9uT0QOh\nHo7j\r\n=DbyO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDcbpCpDnEvJRcp4BGaacm+uzK2smDAXcQsX7Ynv8y/QQIgBw5d14quBYfzbEgjpjXPQ+f7UsVKKBngU7BzgZL/XFs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.2226489a.0_1625767327621_0.7104848898948839"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.d4801c11.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.d4801c11.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.d4801c11.0","@material/mwc-tab":"0.22.0-canary.d4801c11.0","@material/mwc-tab-scroller":"0.22.0-canary.d4801c11.0","@material/tab":"=12.0.0-canary.adeac0549.0","@material/tab-bar":"=12.0.0-canary.adeac0549.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2d6201005f2b928287b990b2ce5ca643ef37ce6e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2d6201005f2b928287b990b2ce5ca643ef37ce6e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.d4801c11.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-pqTiQa6XrBfrU4dViCpfVwkAUoI95BLsPC2WIiW1x9B3syqFNcV6R7SwKKzUZMQsb/eF0Loln4sAJY07SpMXzQ==","shasum":"659e927feaa3f36f2d9bbf743d6bc4abf41d5634","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.d4801c11.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg51oHCRA9TVsSAnZWagAA8nQQAIjuYIUTrEDF9LxEjMqh\nBC5XiZ1jvLZoWkuwHxXFYzW//89Y4lomJHS8a1yxSsIXwywFcaGoIZMIgPm/\noubU8F33/R3Plt5jnb9z1N22heKIY9RadUDR3ervUiI9vsklK4etHSt1r4GB\n7jLioSSqg0ysQ/aslDYUCEnsCNJubTIAoIgxXGdBkzE9SRZw6f1Uwvk5Kxq1\n/4bg575yKyjeMhKHo7bB/0aYRJRApaasBX3X++6cmu8XX8V7RLsz/dnqQIfh\nKp3RYPTFOOWNsJ7y4F8C/xHQNnbImh++C3zEU1+lxkIgrXJUgH/bj/mOdUqP\nkwil6b4tRKVtUf9jX6QSYSHcwtj8g/3F60s84/VrnrzYwbSlLneSC4nRrs7y\n0cYoA6022w5Sbt7+Dll6/zfsSiuCGVEjog3cCJmiB1O4KekPnAF+hWjw9Xvh\nO7f/55e6vcvWt54E5q1NN7t774ghjFhqT3taDruv4PNku+gVND9fsKb5hl15\nwsX6rSF70z2+oEIB9r6ki13ZJeKCpcwWnhRqwNRMLbTunTCTSLyeG4lczb/f\nOm65OsSU0bCjNNvdM/rjttSfz8Ifll/mbuGP9MSND1wfO1DGK+oWd1rjN31G\nZQ2LFV1IBIeMDTtgrkCw6xuqZqCc+tuTQdQ4PgBZBrECNwjLq2juvr60XpH2\nr6ak\r\n=4/rm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIDGMRs6XA6KQyB7T97Mgh7mH7E+U1iAslMcnvaZWokhjAh95BPXCK9mjz0Vi/iQDJPoUzpYDLEnd0YKKHGXJpo3n"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.d4801c11.0_1625774599080_0.4639019113274778"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7ec5f2d6.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.7ec5f2d6.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7ec5f2d6.0","@material/mwc-tab":"0.22.0-canary.7ec5f2d6.0","@material/mwc-tab-scroller":"0.22.0-canary.7ec5f2d6.0","@material/tab":"=12.0.0-canary.068fd5028.0","@material/tab-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"530ddb2b50487eae209a7b76d4233a5b591dc62f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/530ddb2b50487eae209a7b76d4233a5b591dc62f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.7ec5f2d6.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-I131Zx4ugMYCHouUp9LPjPvHqvVi3UVTtw/+93+VolTBn+0fgu89K9fPY2gddK7tR4NibiD/x1/yjBaZ3aZLaQ==","shasum":"e016cfa5fa765cb42d06f2737decbd4cc6ef1fc8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.7ec5f2d6.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7HkmCRA9TVsSAnZWagAALNoP/3YnR0sQUg2usQ3qko6L\n66+3/LrHM8+mquJwqjrJ83ew9x/R/5GGyUq3uy3H7KEWgff2nkuiuVu9z2Sp\nyrHzrCfxrJY3S59WAO60JAeV4A/gMpJCw7Oj0r+SIDDqnRZZwc4mpXeeVJFX\n1/aMU16d1xTJLkCHme2R73kSq0feuRvY7G4F53KI45qwIhC8PGjra0jn6dE2\nHbWCDKy6BtY3Ev08EP9Imzkl80KR11Adi873321yJSUpidBBl+5LvlOYEjgM\nLz6eL+BEK4A4RJeeOJSFxY5nLW0BEcdzCj9EKHKCESHuO2t+VRWuBvpf/bGR\n+VNRUhQxDE7zUpcZ8o3aVCtEJb1Ju4EtqsJNF7o4i3BHdfGzUorcRXg9XcpW\nFj1C7tzXSR2Ncsrn0QX8k2cYckmA6SduLM62Pnl6GUj3Zv8+slyTj8iVq7N/\n/N9NqvrEY3a0DA2mmdWX/knUMyKElsp8xvw1trWc0O23Ys3h353vcKP5687n\neuQq8EFFb8Dn2WUHYDq8YbuwWZgy8suQsjLHBWTHEFtCt95vtyq8hdoG5GSA\nfyWd7TmP4li09v1bNU9FXjIh1tL1xfiuC89chc91/QqdcAvXM87s0rO8AB2E\n5PcyOY+cE/J4NJxMSVfJdCHU755TOuMUCQvwZTCOzoGHWAi7BuOeEqeZ6zB/\nJbRn\r\n=UgX8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE/OqmGjTibfEXICSgVhwLSwXudvt6JZiVjVbokscqR5AiEA4bSlqlssNzM7TCZ64Qoppm2BVAXM/5giFScPk+YQmxo="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.7ec5f2d6.0_1626110246229_0.3539144624735986"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.86cb4ca7.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.86cb4ca7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.86cb4ca7.0","@material/mwc-tab":"0.22.0-canary.86cb4ca7.0","@material/mwc-tab-scroller":"0.22.0-canary.86cb4ca7.0","@material/tab":"=12.0.0-canary.068fd5028.0","@material/tab-bar":"=12.0.0-canary.068fd5028.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f679091aef1ae61c94f4217310d6cd1161c48598","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f679091aef1ae61c94f4217310d6cd1161c48598/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.86cb4ca7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-b9QY1yESvOatwDo803Q6os+4NTSAiS0oYUOYBdUOvWPpbpvHMLHpqJPLsH702RQAVwofvJ876GGhWH7JmjREow==","shasum":"3b77fab45b5b1ca755b2579221a93b9902f02209","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.86cb4ca7.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7c+HCRA9TVsSAnZWagAAzXkQAJxjnTs8w5+cSod4XuZQ\nLTxbQEHj8g5m2KKCYS6Y3tI1YB7V1N4tuSzY6x+Wc4twnZCzqYCi9roPbNXw\nC7cb+HEDXjFKFscRVsClKS4w8q0qDh8VXTHUXFL6N833NUAYXdu3AGcYuaB0\ndhvCLfCAlD/0FaeyA1MdOmHoqGIpcUMyBVmEx5s0BmOdvl8ifs28bQLRpGFb\ncvIVoRO/GCRO15gvbtVC7sFLIfxlAafedu1nDiF1mKc1X7Ij+iN5urZdPEta\n4tEHsMpEG0x0p6B/mZj1ZmO1IsJKK1LUnz6VkcJ9EWC60kbOdqgl4Bq/mmrM\nr+aRBz+i423S4AMBUXp+4UeS5dP3DyEwQgJI13hoOQLebnJdaDeW7Ld06i8c\nl2xPmCNA8oktQeX9tQIIU6GCTXDcuw/YImNa/KTEzzR0Mfj4EopCjRxsw1Fn\nldeB1wM+dyxR/90woxR53AcrmMp17d6qgkUTy1Nfo56X+pOtZD4VDNVDHMo2\nlexMXqJvCJaLwaMjf9BfgbdZZu3ee/Jv/s4yfQZMBzVeaqkrjEbJ8NMFgzyy\n6lCD1AijfNg/ncPMA9TR/+eoN5fs36Bc24R/+zojvcJ4f3Uu4cWhOyqEQHcv\nlAZfZ4B5dAgUGUsUberTINTSk5ScKKSX6R8bUCY0g/CEln/moT1TCPMsG4qS\nEqG4\r\n=RQ/U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDMLzBpLB2RQfMdSfQQqURjSms+HUONfzrHhoQncaIZ0wIhAJ81vltl0/YVs/DNhuBvghuCGElCoChHrAZoo/XEu16R"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.86cb4ca7.0_1626197895386_0.48766446447428113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.bc9a724e.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.bc9a724e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.bc9a724e.0","@material/mwc-tab":"0.22.0-canary.bc9a724e.0","@material/mwc-tab-scroller":"0.22.0-canary.bc9a724e.0","@material/tab":"=12.0.0-canary.ea77795b1.0","@material/tab-bar":"=12.0.0-canary.ea77795b1.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3f6fbd971026d270d71f4fa8515adb70cb387ae3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3f6fbd971026d270d71f4fa8515adb70cb387ae3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.bc9a724e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-04BykoDwKw7ggRF9o7Owd4jGrbjAqwgS7Mw8+Mvb0jV++CJPi797V+PlwjiR0V0e6DuQtxmHKPqAJfDiQ342eQ==","shasum":"b9082367e13dc7ebcc6f2fa3d290ef4e066857f9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.bc9a724e.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d6eCRA9TVsSAnZWagAA1yMQAIZ4Qfa5OxEO87RHGoYb\n+ahyxBf4YqU8SSJbtBb5U3zi3rim2eA7yp9q2TDun5abppQWL6IapFHkdwmz\ncZL3KAyqEvzi9KXEjV/VM+/EMdnsmfC1ITo3LEGQ+k8I3Xh0u/42qt3ymVYN\nNI5jzJ5G3hf7s6kKLPnBe1XnEnOgDoa1KBswfIfL/NH0z+X3KISO8QDj7021\nUJDeC2G3Lk5tMRL9Er0eBAPoXYj4oJVhTbS4h1zZxmdL2yi42lfm0a3qDHk9\nmYdgsGo4AbzbgveNHKwf4mLk5HPzx5Nw+nF5KHpYWxe8b2s/88ne8aEv1/ig\nBVFEe/07o9naq+Y0XdgaH/WtjDBKUe3YCbOM+DOzmTqjlBRWm+B5RGzRE67y\ns9XOFZ94i9fcspLbKIXWC8zkRNmEm6XTxhhN8w65mNM3It+WH66zbcmY9l4P\nHRfQe1OmAWTN4wHK2E7rQ63WZXp4WkR94i09HMydtMuP7flRXog6czjegTaf\nrSYdkGezK/wE2bAyGNq/5hgFKubStcxKrGSc0jRyZpz2MeJbM6id7Nqou6GY\naNQX0/n4wftMrOdmCjOZkWZ2gq9vogeg/ci+wdpzdipwwSo5HTONkYLPZgQ0\nEZV+lV/IAxCkeJYqn2U4RqGCDl3Kx41tdlaGAQdD+JvDDN4840dcJWl2/96T\nl8S8\r\n=cbLR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5MGfd7MuFoYO3zCikum4FwvwkE3+wQJi/0EgAhljPLgIhAN2jlApCpvV7K/MoIp+cpHdPlE5VL55unNb3KBfPKrzS"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.bc9a724e.0_1626201757652_0.2065161979811183"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.7847b83a.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.7847b83a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.7847b83a.0","@material/mwc-tab":"0.22.0-canary.7847b83a.0","@material/mwc-tab-scroller":"0.22.0-canary.7847b83a.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"96a87e19e381c977d8ac1c7a5a20a261fe54c448","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/96a87e19e381c977d8ac1c7a5a20a261fe54c448/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.7847b83a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-RClzmGrlO+dTUDtLhC0BiGylvgyahosWJNvV5/jom73mmhtViU2HjeSpwqOc5tdtq1Q2/P7HifYJ8p+k2cJqog==","shasum":"01079fd6480f50530a761de816dcb73f465d3760","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.7847b83a.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7xySCRA9TVsSAnZWagAAeuwP/1qWRoNozD6/GZco3bBe\nN9steq5URO5lxkN4ZAhsNN8oCUWLgmjzqzCvQBo/zuiuMjU7zpO13RJZ5Kiz\n83g/w55rEyH3za4r3Jb8r8NghOJCyeYBwcCKs7BBXp7SRSKX0cUaKvQDhxjV\naPdwoTWhXarTGOCaWCceKvdcwXCzS7T1wRB7+p2n9MsKU+P5sA8zcgtkFI5D\nK58erN9BRZGa8jAgL0lUFfV+WFxo1df8AD5xWztzg+tKcqUt7UQ0fMqUefDD\ncEHzrYHK8gvxNd0Mm/zRk07UZ3Ej9g0e66v9z8IJvSWVqaI34ShbEmA3h+rK\nJYvbtqUvcW9c60ZVVDmz5oyOJL8IY+OtXnRz4axpuJEOJ96mgyFI60ETkbUp\n+X1ZKwVOIrku+bEgI2yZGzVBaLl8pLtGwgi/4ewsBskyVW+m3Q3nJVMD1X6X\nHemrPv7f2XxbUuRg4TDWa8t+Uvv8qHXQoQGNX7KLSaBFSb0vjTgaMMr1h/m/\nrFeqRBrUxSSbF/0b1+fwvLQymr+7y0f9hulmDILXxrhZpyExZop12g/XGbCR\n0jNAsINkcNdvrHczAagqHZgN0o+/iHEtmSpX1OL9C0uPnrM8b4Nwa4kPK6Fr\nNkqroeKuWoa+2hJU6VY6tsk/rTcM69npUWL+JzpEoH32FD2e/9tjKvRrLkdA\nlG1N\r\n=X8E9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC07HNtzKMR5HjwOV1THOz4zG6lOM5P9nJAWCilSaVfNQIgMlwymPLeZdpi1hOjvigy1zbyq4Mx8IKo+iotTgftypA="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.7847b83a.0_1626283154163_0.0925808297347861"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.0-canary.8cba18fa.0":{"name":"@material/mwc-tab-bar","version":"0.22.0-canary.8cba18fa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.22.0-canary.8cba18fa.0","@material/mwc-tab":"0.22.0-canary.8cba18fa.0","@material/mwc-tab-scroller":"0.22.0-canary.8cba18fa.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0eb1334d9597f86a21b5f9edc232a1c0f67f6abc","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0eb1334d9597f86a21b5f9edc232a1c0f67f6abc/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.0-canary.8cba18fa.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5xMzaVjYL33cp9C0XfokRp8BVm182MG+yLVf1L568Tex7jdA43Q/Qetldx1+9gaKgaFpaOFESHRkjJt/VltFlA==","shasum":"6a046d2b3159d154b4fb6fd51d3d3c2f4334a59f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.0-canary.8cba18fa.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg70ilCRA9TVsSAnZWagAAgGgQAJEC4AvJrL5jCwHKdYx3\nDWCqQ8J29wRTq1sY3J9xB77R+4ynZYn30OG/pTHDVPv9x+3xooHA094OvfpE\nzyj3AyVjER/5AS86nHzt2ULUM8Zp99HEgib1oOXrEnztJZ/PJsu1+FHzr/qI\nKKRe9k34cojH67eHTM1MDuAyj958DG2Qfbmp18rY0iSpaEsZBWb5UiasGFG/\nlJSLbW1S9X2jVMuJPHZVV3BWIMNApf0L8yDAoobv0sPAyJDWT/cKrWavR9aQ\nECa3856btcX/c0Mxyi/RxMi/lcSzNnnOzdI3oFm3OjsSyis9WY0wR/Ph3wyE\nVpv7XY6LKQdIwddL0U2xjtitMU1/jMMsfbYOlcTl0Mv4euGgsIoWTrZXMe84\npe5iFXW80AXqm2oH7tQwBFCoiZtvazk+SV6oqrgCthCdoxb+Ye+6qQCN6tWC\nY1dP5k9Eu0wivACrf8TA1/aJEJs5nvvZ4iNkGzl6dS2p5A7P31cM0UuKDWFb\nECGhKeqXHKfbY4gndkekDwExo5rZZons74sZWkrKpwTvJ+bbx1oI3bogMtZL\nu6VJ7duCvCaW/tCrukbe3wxDum7nRTKjDCJq8krZqW4bKTDLXLiLlvaY38ih\n17E27B9fbHKj6Jdyn9UcdGNMYRppRAZH0vYz3Jt1Z+nvrDEGy7cW5daq3b63\n0clU\r\n=Crwn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5IbFpgQfPCLB52IYrlogOoIrgz7VlqAl9DUpky0gzzwIgB06hLv2kVoaSUc98V0ZaUUQvoenvMl07VvuiCadEako="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.22.0-canary.8cba18fa.0_1626294437299_0.7451600517628274"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.22.1":{"name":"@material/mwc-tab-bar","version":"0.22.1","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.22.1","@material/mwc-tab":"^0.22.1","@material/mwc-tab-scroller":"^0.22.1","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fbc09b4e8766843c4aef86023c2cfa4cb9e7cf5d","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.22.1","_nodeVersion":"15.8.0","_npmVersion":"lerna/3.22.1/node@v15.8.0+x64 (darwin)","dist":{"integrity":"sha512-USn9pIMNfz2vPh7w2U55j0EVr82x3odq9VdcDGG5d4jWwzMPjJ9CKMjqgFrlIiPmxieD5zeSW0LauGhwv6ujOg==","shasum":"69a9b0124620db60b5b9f7b43dc40daf736e329d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.22.1.tgz","fileCount":13,"unpackedSize":41908,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72rKCRA9TVsSAnZWagAANJYP/iuZ2q6wQqDC697h6yXu\nSwK5GlSbQS9zWymC9kxz0sRlQ+FRuiXmESPfhZJraoxssVA5FUQVpaVcUoUs\nhC2+VqiUYfsWcJV86XTT3FBeERF7pNzV53BFT9Vwsf3JReDQq3bAuTesSFgO\nFVEqj+hwQbm62h1Db2Hyo3rtgGMQbbDsnCq0M0eJm3JEBFsZHrOaVeLpKleU\nn1PzsdV/AVIVawwNHs0DR/INOXejBKFEvTqDl8bBirZq36fezHRV2KP12NUp\nqg679YwCpFg6QjN+f1wK5gTHz29l2C3TeoVKztz6Uj77k3mdvzfy67FgEeA2\nuenwSE+J71rzcsx4dDD+zOiMt00gGqsv2/vAwIn4zPTu40G/nK00uGbYzqyi\nzIXwvu9c8IXxMkfrt636kqGB6S6lXPp1VmrVmXCVT723TVwMq2/Xo1+Ejf8p\n4ETicyFJ1lZa8rxuxdZi9yTab26rRklObE2Tj5hOHJ1xn3LuBY67YDh6PVTo\nQFUA1qY+nPrOJJ6u+J5iZZ27n8y790EoR0elgnEpz9YIB39LrcAb7cSnJmal\nS9Uz9fIvo2GWqfaq8kftBFfMnA1qcYUsDL+og8q1C+Z9+1aN7rqozZ234un+\nmJBMR9/X4Qc0gqBu3GpQJ57GbmAJtRAIyxmEYEfx0dBRaRoL+6xWDjWbyL58\nfoYC\r\n=8Hd5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYbXvrhYMnDW94LhMLib0+7vjn8/qLpD5sjyDPYEC6kAIhANQrpwB1TALK2p/qvqYEnLHHVBbwxyjxDch2FDGPsgtb"}]},"_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-bar_0.22.1_1626303178231_0.7346747336116981"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fbc09b4e.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.fbc09b4e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fbc09b4e.0","@material/mwc-tab":"0.23.0-canary.fbc09b4e.0","@material/mwc-tab-scroller":"0.23.0-canary.fbc09b4e.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"928fe21d53da3c383833e0766f262dd5454356ed","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/928fe21d53da3c383833e0766f262dd5454356ed/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.fbc09b4e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TxfHS76qtoaK46vyyNBIEQG+YasuhkXg9lYOLw8dt8/RFTpiuM+W+7JFSzFsaTm+50T+E+H91RG91C+0m135ZQ==","shasum":"3e3dfa0fca2148c49bb0c175119861292f7d7cdc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.fbc09b4e.0.tgz","fileCount":13,"unpackedSize":41977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg72szCRA9TVsSAnZWagAABXgQAIHDCfQO89wKwFg+vCK3\nGclotus/slg+aXW4w03ILiP3BnoTodh5l6srSt6aEDwslNXZYVw1Vkn1cy3q\nmvmG9K/Q/j/lB48zdohu0YI6ElaxAxeVy5YFGXfzJ4Ph6bU7eAaa3pi+74Ln\ngAksqUTbY3XRHZOhBTtsfAYwfuSWlGgw262z5ClBhL/1tSsu3dsi8CbgZ6JS\ngQotGX8rCgmltgbFBqvCHQ3utUgvHyaUVpxOLOoRFw7wFPgzzbe7qseE3aHe\nRgQIxjU/QufQNvZPbHm3vabFQs2Cw9B317/5/WO1AeqzdG1NPFOutkpWb42L\n7n0hqpH8KwGHnePQ5g2WUw3ysn62YD1aD57EvN5455YGCYFX4DM2oz6C0qms\nmyMFITscMeMQQ+pqX+Fj9LAXF+Omc5rPcllrLWjvzt51BYCYZ7oCd9jhaH5T\nvOIf0eJKW0q/r6VnR7An2z+xvKaMDXxb9LNt1mAaEP51wag71MacFriLOV8l\nZpauwDHRZDU6C7fzP0xooxev1gP1eQeeXfLOKp5u+3x+Pykz9ULAYgXABgZo\nYsU2J78z3ooz3eyrkNBq6eCAXvqDxW1vIU8rJIJZKmykph4oqlzGVOtInekw\nLyiH/O73a2e3nIrhrs89soZwyniSPG5krKiN6qcO0j/3ibtup2tZ57BDFrLk\ncPwN\r\n=vThd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDnyKfAlslqjsooCos7CTu/zTHIh5LI/PlRwdvPbpW59gIhAMaYRH6py8P5DtkfK5ycgVF3AxwAJUVXjr4uPE0ng+Ia"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.fbc09b4e.0_1626303283067_0.772609889166918"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.73e9f83c.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.73e9f83c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.73e9f83c.0","@material/mwc-tab":"0.23.0-canary.73e9f83c.0","@material/mwc-tab-scroller":"0.23.0-canary.73e9f83c.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb506f7d4ddb8897417b2451e1dce233644faea","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb506f7d4ddb8897417b2451e1dce233644faea/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.73e9f83c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5pbh5KOtb8GEiYmKjgN7y5NbzEBkmhl9RmfXndaFOhW6X9Ur30ga61IZ4BoWzZRiCRDZrfy5rz5ssnkqhMGlGw==","shasum":"311fe3ae1566060145ff44f18248c3f77847661e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.73e9f83c.0.tgz","fileCount":15,"unpackedSize":43346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J0lCRA9TVsSAnZWagAAIZcP/jqHRFiQblFVs9wV+uW6\nby5Q/9BWKtcJY0kYT8sPmpT5MFVKyunlPR0ywKG3h+PBXLCVL9o9boTK4ik3\nwtwaBbDEnzR9h2+5T9zJSRvKGqbEbFH6IVwpEWr9reo2tFVitpsO5XjED9ih\nnkmrcWyIixLyUp+h4uNqijU902gQMG6U6Fm1Qh3/MZv9dzGB4Ibx9VS4UOdj\nmhfgGXwCFTByy8OtfCB17pDtGTrWWaiadQvvtG0AJ/yR6CDb+fDz5gXinXb9\nP3Kbafr4fT9lYGfN8pFT3xWr4TDQbT+cKiM6fqnooElc9vwwO+gbiAFmt/27\n6bZDqyuaVtHNTbmB2M7fvwVZ8FjrAItHQDcU0V6CxT76/WrI2AbxV/kVGWKP\nDq86jAIrGZEqOLxdCTcgtWX8Dm+jNsgMkcclDGyyxra3+4ewQi+F7yRHYiK9\ncp1W1Z8GSpOKbm7YXsmMDilBRzEI1Ou50oWFiYpuMjbEvy2Cimq4VDmBLras\nP67fHTjvALl4VZz5a7s08z+6SZdNK5wvkEJev4D74Dim+6e081jYJzK0C+Bo\n1NSRHtXE2p54RbRDQseZKIK77RcU4idQGweJfhvfcuqpBX+8Mzyxv0xef6MY\npiG8z+k2xEYy6U6AISaMZ9IYAC2RaFxhRi5Ax+Ld9c6QdTVMVuznnOunPHHB\noJ4z\r\n=NK9h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfMtJCEpQ4R9w3BR8h6H+iGS8XCzbPWxpGjWkAfACo3QIhAP8eyyUnfT3gBcqi60+DvBpZLP1X+M/s0fGAiI4299q7"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.73e9f83c.0_1626381605558_0.6822673011012177"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.cc0aa7a9.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.cc0aa7a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.cc0aa7a9.0","@material/mwc-tab":"0.23.0-canary.cc0aa7a9.0","@material/mwc-tab-scroller":"0.23.0-canary.cc0aa7a9.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"46cd2c64b884400d63eb38fd81a1ad72accf42df","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/46cd2c64b884400d63eb38fd81a1ad72accf42df/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.cc0aa7a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-p1EoDP/aTn1UmntA/iS1Vb0GNlZE/80+QI3PpQb3dU8Y/316BnAFthATFfQRK+WXkny3EEHm1Ro7TkWYM5n2pw==","shasum":"ec3bc885c43d1df857c8641f395b1ccefff3a2e9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.cc0aa7a9.0.tgz","fileCount":15,"unpackedSize":43346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8KLUCRA9TVsSAnZWagAAzTsP/3roO69gMMX8qSLwo9HV\nUtQYYiSwPa61RMGbXACsr3wALgqDaG6B29WX/H6Dqh4tvkiBwfhmyjOL5bGx\nAG8P/Fm5rNPB6rK40kVv7dBfR/Uo7hJi+4IlEeeosPIdoq4imtNbN1wyCGv/\nAGFImN81R6h339+1PZoU2+P7qUyDmmt8YpT5ik8Thxc38swZ8FqxyLoP+PIp\nqo3i2a+32+u+qDTmTBv4qaHJeUJy0itk14vjRjZeAMsC9XtpPptErFLTau71\nXurOmyHqVjNVt6erb6Oq2heVQbr8NQK9T+LOMxgxD1wXHH6+U2jPBVVZ5qqf\nD4QA2zJdSE4V6d38k8Ats6vKu3S5SbJlMNB2nLQ/GhBGZpMJuY1KgvnIEUsJ\nGCfCjQ0gYcU999xXWoTRejHfEeED1/V1TxdW5fvbiQ06F/YaOfJWmz8ApwNp\nUjmz1VNdyslPfNX4unvGrEo8im+cQXofiGV0MvUQ+Ve39ooYtwtWSjPJRqL7\nP2aJaO5TJ1u2o5N4FxaLNAPfOX3ie6vpzvOlgsfIbNGSxWAjPnpkcCF1Zz1E\n8J0Gv7g4DGVqHW4jv2vh3gqivv5KnmyL5LXcpae2He9IEbKiHW9S3BsBv18X\nosZihRm/MBHFD5Oq35NDrFKnjEQOuVSEIYgOnDDrG0e+KVcFperv6Ze8UrPF\nDnu7\r\n=m4R+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCrtmHT5KAIig7E1fBtKeXNr0LaTzjmxGkVgxvJN5eGlAIgJTl8cCK7B1tXMDiyQm4bCKkuwBqz2hZENHgzaleEOMs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.cc0aa7a9.0_1626383059910_0.3073779248845565"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8fcac45.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.a8fcac45.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8fcac45.0","@material/mwc-tab":"0.23.0-canary.a8fcac45.0","@material/mwc-tab-scroller":"0.23.0-canary.a8fcac45.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7319affa5e07f6651089343a3fdf21864f2d3de3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7319affa5e07f6651089343a3fdf21864f2d3de3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.a8fcac45.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Jp4Ocm4FRGkWfsn0/jtR4yHGhqxAbb/inrPGIPyfWjsQYCKpftfBfyfxpDpaFv8tol0NI9YSAqo3xzQHi79ijQ==","shasum":"ef74d84d6d7fa00f4d4b093143f9fe1b9188659b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.a8fcac45.0.tgz","fileCount":15,"unpackedSize":43346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Kc+CRA9TVsSAnZWagAAPzgP/2wqkxx0McWzbQEE6/qt\nOqK0Z+nx36jg25hyQL3TGjjY3ZRKNc92APjAlEKIiuideb6SKJhzZNo+j669\nU3G09/+Qdd2L8A3dJKkMoZcEmNXYvzb+tSqvgnbp51q4V8zsuTbbZJdmRMrs\nqyqOSN9Vdv6fL8pH57XdVg1+wsOfip+Pw4LCm++cmpsY7+xBhl55tEdl9VTR\nEOVL2+hORWbgwsxtMEcsTTq7+BkOyKxuBYe1MR8xbIu2eBSDWhVSaYjHT1lC\nQSphtCmP0WqrM3PP5I6WaiZUr3m8OxI9ACTVAfZJYFDf43BI0GAfu38YP6i5\nJxndzmwwWN0CPu6mj/CGbyu486hLZTvkqidep0BKKYKpBz8/ELnN9JTmWlBG\n6yzhGyf2i1lmGmXHaN8oXFbRABraL7dRZWx5VJhsJOr7Od/ap2Ww+tDoydHz\nzXpOC0boQ0J/C3lsu7yRB49EgSDDjLqdlYNZN3t5pyBlZYls6X22+U1kwbt5\nAs09QE9KdhISVEsJ1SCYnoQiO/PhHezQFBwcvKJOOQMVz7FTn57z2vgcrV6A\nls4S+HJtB+PwpSXCm95k1TMStllNp7rjZ0hN21yOMo/kT8Xusjw5N3E14crF\nf6Gmytwbwba/+yLDXzfWhN+Z936mEWZQCPt8pNHdwGHYm+/92OakG9XXG+yg\nj9BP\r\n=bJ3V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBzdmJyr3YWsCNStOASbrDquaQxndSMZqShWezsJUXY5AiEAlRBp6Un8jr3hvBHbLVTZbODJCL2LnDEgErXFN0EcxPM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.a8fcac45.0_1626384190542_0.5447263012697141"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3ca580d1.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.3ca580d1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3ca580d1.0","@material/mwc-tab":"0.23.0-canary.3ca580d1.0","@material/mwc-tab-scroller":"0.23.0-canary.3ca580d1.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a2e57ca3915a4619a2a2fe234e3e3bb8be5a5496/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.3ca580d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Dmo2m3pNG/ptfSqLCTAClQmvZ475KqEVqM3PReBP8xa+EP852VCnzxYP+yFw0eB6C8LcA0a5C9oGFZjaeC2ypg==","shasum":"855ff557786d97513eed6abb8c731514550e5fea","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.3ca580d1.0.tgz","fileCount":15,"unpackedSize":43346,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LD0CRA9TVsSAnZWagAATv0QAIVUUkLo1yTP9Cjs3/cn\nrdflTuzQSbCmXWR0NzZvlDwgCgrrZoN3OdPbFdzxzKyG8ZJXkK0yf95t8sFW\na/nu2WXABXIlGYLlKcr0ZNx1mIm4mi3uH64x0wE97gFv6fkjdwsmqLqVE7FG\nM2x7xxt2Uw5iqTX+jMjyLEkdphxYar+CS9rX6bxORlarvYVhZv0yM/GUc59L\nk9zkxDgJ70+4LZ2BEKLWdDs+UiD9+gohRQKpuwWmKzOPCU78sSaTETlUfbub\nTCl4p8TyX3FnEILFUtxXnxRW9eTL+BOlYdRvArkdGCiDsyedpMto+vg3k3o9\nae+MZzTh5oPCuuFx7JY8NA0bcZSQs3vtOItyoyJ7+nLlkNm0tDWENcJl/LTG\nxUdnJfULgoK49sJonq6kRJbslMFW8+vFKT1h9ma3XtUfpIyZkzSEW+v7fZ16\nm+EpRFipK483EKyTYEAhk0ejihc5/uAD9tIhdT8ZTig9AT4Vd9t4sJ7DrxS4\nJMPZJrDzKxhW8zyg9bHm0c0x/w88dhvOEz0u+HwvZSR7t0MnzVhx93LS2T+W\nxm6E36aGdbcWzRZfUVGW89u40Hl4G9qcC3jlO7ROqBNqMdN4ZJ/qftTmYXIw\nORj1vPEMV0TiCUyKIscU/36K9keRbX8QiyMSph6h1PD7nWyWxAyNnNEKgoTO\nf4cv\r\n=J/Ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBe/Ysvd5s54CYHnlqepdYV34gKO13uVgYSVd+7lwAHwIhAO9YGNc0+WFPmmpyhnsoDI7Ce8cUiGnSG34PJM4iKQcp"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.3ca580d1.0_1626386676282_0.5796465477041097"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9e41cb2e.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.9e41cb2e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9e41cb2e.0","@material/mwc-tab":"0.23.0-canary.9e41cb2e.0","@material/mwc-tab-scroller":"0.23.0-canary.9e41cb2e.0","@material/tab":"=12.0.0-canary.22d29cbb4.0","@material/tab-bar":"=12.0.0-canary.22d29cbb4.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"66f1b7c941717bc279a73626020dd81fa186f3b2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66f1b7c941717bc279a73626020dd81fa186f3b2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.9e41cb2e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-VBm0ZAI99pk0A0YgY+dSSk0uh8rpASoDiFWtm6AvKELig75+tju0eNN6UqJv5IyDGFArttQxeH3fLNSWYjpPbQ==","shasum":"7616ad26182552776337ccfd9eaeecdb609cf947","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.9e41cb2e.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8MAnCRA9TVsSAnZWagAAJYwP/1YWkpOxkimYv5Rb3yfT\nDz1RqLKQMDR3jqYKYEWB0v/BEcy/QZciism9T0KkjN6d4Fg+/9NRlbsZFJ+L\nHVcOXfFSqTr3m5E1Pl0TDMbkvkG4G5n1oHPU4pLMby0skmIXCjBoR5k5Ua5R\nXh9OX+cUTscL8DkBbO3rs0+rQC4tU5ArPRMUaQSbP1M9UVM6ZRGRPx6XSruu\n6zRoifex+tNVso3lr2xWIBJOubCDMpjWX9WCLFsg7JuoO3IgjKnE1KCXNBVP\nFwl6PdqmTVkOeYIOoy+V3WfwEmzB3NPsg4ELSJiJNRORo81REFQjzkfWTHrO\nJG470MpOZJNStwgo5aBcvp7cJM+J3fnpjvWetkyGxIr7s3RLQvdh5RyukB0i\nnnMqoH0A7c69v5eVo8YHb73etvayVJfB7VLle2yEgXg/TX3WmcpYGufw/nVB\nebT6foiMPne4SZJFiD4X45F3kwUnh/WWnO4d32L7XUJkQnGrHZNS1CZIIsGt\n5KL6TuMDqD7LlLoleKcw7Ir0kT+QHAvbeA/8W/Csr3CkpsywA9CprJVAnk4V\ndvLlriPqFQyK3vpM+lkBfELUY0pp/je7NcVL+MGj6KaqrZX0E7pH7vLNnSWN\nt7yhjx4XajvGMC6mfcim8GZMAnxOz0Jw3JyuC8uEPg0J6mYJcpcdl+QacP0/\nhwOw\r\n=HMiY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIByx+N6W6Uhl3CUy3grF1lYFNGOKdaVFNYumvJFb84fXAiACZwuU8qyjPXjDMiVCc0fLLanX9LcWXV25JP8XLNf3zQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.9e41cb2e.0_1626390567467_0.14454121471673487"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c180db74.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.c180db74.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c180db74.0","@material/mwc-tab":"0.23.0-canary.c180db74.0","@material/mwc-tab-scroller":"0.23.0-canary.c180db74.0","@material/tab":"=12.0.0-canary.9f68a932e.0","@material/tab-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"33c53eb23c6f331885c1a70223139ee7e69ae97a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/33c53eb23c6f331885c1a70223139ee7e69ae97a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.c180db74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1wFzGlLrlGDi5aA+utuuaA6iEWhyLQHEzhTCEpzKT6hT7000VZCZrQLSdxyvP9wr7KFjJKboqIIp73vow4p9tg==","shasum":"fee4ee46df37758631d3703aa9d3a3356c3472b0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.c180db74.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cEPCRA9TVsSAnZWagAA0wQP/1V+Cuxg7OAO3WTuyFhD\nm10f5S8wqXJ3wP6sDccSuR1H2AwGmcQ0Q0YHejr9dtfqwe8OrYsf/WOOmPNv\ndW8rgiDNt3wMI5zffZ90HGiH6jp8mnmHj5k+mVspliYT6mmk6AOQz3ePoTkZ\nkZnj8zEaA7VXMbF0qnczrhfnBWGkNv53S9yrw23LqxZSACrnkDp3RFTa9E9n\nLWmlY7zCcweGHEfUrUfDY3Vi5UPX4GBV/uU/d5OWerYIZY5JmpU9ShIPgawU\nxKHql/KD+4dI3E/YrD6Q2seVV+tE1v28kAagD0zU8CHG6aNQde1AYCdvCsVS\nHocm1kjWLEMcv50DXIvDdTZyX7FWupD5W8pBMiYwAx5sAB+ZH1Hqg4srv/hk\nQQ98I9QXSw1umoJ/3/DoJ/QEeSTiA59ZX14RaSr8RsTW84GTOepshVyvemcD\nKmMhwVfFblLH8XU2piyr/qIjIve7lXmoN3Fh0s76WaP6dBjN/qRDo1/LtcvZ\n7LvCCRRzKDVtzXd1NycNf5tPHZpCp15sjqp9WDqdX9GWtr+MX/8JXVV/D8f1\n1+VXGlTt8uVhSpSBWt+Ubp4DB0X0zIEk3wOHRXl55hJRRLyS4keiDtXYZn/w\nepfUaaQWg6BEaASUVWhOc62KMoiWUGWVmsSqPOxQAj0t0GGW3QnTTiQCn9sk\nfRRt\r\n=6F15\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDxqjz9w3mrHixAvfDSH6y+DpOxHRM/CpyS1K+2gH6SHgIhAIzgXCxo82DdwHbpJO1zzmgAvaMG1Z2cGzfzkfNyhj1j"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.c180db74.0_1626456334841_0.7759490323840967"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.0d0a9267.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.0d0a9267.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.0d0a9267.0","@material/mwc-tab":"0.23.0-canary.0d0a9267.0","@material/mwc-tab-scroller":"0.23.0-canary.0d0a9267.0","@material/tab":"=12.0.0-canary.9f68a932e.0","@material/tab-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"edc1a3fb88ad7e6dec8f22e73f329dd02bca032f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edc1a3fb88ad7e6dec8f22e73f329dd02bca032f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.0d0a9267.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kwHbgdvgwE5s30iV1z6GO1sjaKViXiQA0RXA/zwwYlq0zv22qcCbnLmdh++MCVRkmiOZWu5pklDhuTcnzzTgcw==","shasum":"ea6f23bbff2b3fcddefa0ac46d00a9fafd48d88e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.0d0a9267.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8cibCRA9TVsSAnZWagAAUiQP/2Coc6Pk/D4pjEnp6k01\nzWUjd9hljr+w/lJtWU7/faDcAoILsGPVzUIy3x9dx+i3sZ5iUgSbpGKs0tTh\nZlF3jEF+OnSIDnFLLyh4o7dQFLfotvSdJYA9JygkDK6WzLDOK5mekTTW8Vgq\nqaRqQM8ZqVddJlfMZW71FYdDajGAoUwDO8j3Q5vRpDzgwSRyyAIjV1j8kNv2\n4VCa9brrADpNlCKPiPSXFwTtfbNMb6crMJ6vPVmDGubno7AedMqaS6l0bzbh\ndTV4ce5u8jZ0B4QUwn/7pBLoeWxPwwglDwmm3CIQdXoWltbxRFOArqkMbNT3\nseyqO7fqg2m4PlYEl7ugfd9xfAgAFPXsQb+HvPPTAbm3G3QQ+msKtkJULKvL\ndtxK2eGBIfQV7hZgZLhXDc0mOU3+GA+3jWUZOEwPH23JJgRS2QVdO0eDaJLU\nfUa4njWisKFQVRFEaaDOcmM/NIcLimedXP7QSs1LvJPXfSgl4b0hKC3aGuuw\neDtgGcXvP1QSEhST7W6a/SDL3mQP7RoDKqAi7gCDsDYrWUnzkTrfwpiBfYWo\nOrr0tcGQDuDctYqPHrCDfu63WM0KnDGl4Ftsr8rGuVJRhOSn9S7kF/THMl8H\nev5l2vGMo/9x13USdlfDBp8ENON79xFudoN5QaDk5hJrpxitPcV694ymDdkB\nhCCW\r\n=NTOz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD7UXuxC9A++kf1G9yikd0raKEOCfGJpIBVsrl04h/xSAIgLAUBNFlj02r6F7LdQVMkxeZqH63e4TeJs39cX3Nh6OE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.0d0a9267.0_1626458266898_0.30066218292075675"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d234ec3f.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.d234ec3f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d234ec3f.0","@material/mwc-tab":"0.23.0-canary.d234ec3f.0","@material/mwc-tab-scroller":"0.23.0-canary.d234ec3f.0","@material/tab":"=12.0.0-canary.9f68a932e.0","@material/tab-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"950f54539b9a71153ac09a57ec5710112c307c8f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/950f54539b9a71153ac09a57ec5710112c307c8f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.d234ec3f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fEBBKor8V3D8UXgpQee557Ur57PGCIL0kJCHdPihNwTcBVidZys4sfphD0z8s2lphanblps/U9D9MflnChE7LA==","shasum":"b438249c29c1f57e58cbf6a729df364b695607e8","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.d234ec3f.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8csSCRA9TVsSAnZWagAAYAIP/i4Ci+dXMsGRolpht5i4\nxt9Cx1gqo67By/EhWAi0PlQRohyLKCV9ej1CGKKrHrHwUL4vIkZlVKkDCF/z\nD3mIwSqKa6znS3M3K/+AlnYGxllnA9Ujykgzn4BUGSW0Nepn5KmTNdMPVwLa\nViI+ugGt/3jp3ssYFjxF/VbKibscup8JAt3WI8TkA8rPYgwE8FRn5jvqOC+2\nY0IniVgpihEqF7kxD/afUBQ4OBQib9UMlyV57CGu4jSTV4Iy6pwKD8UAe252\nc/Ig5o2EXQkDPTEAGiIpDysEV6exC1R+CnofQs3hb3DrhPwcd/wWEdC0y3Ip\nwxOY82DMExzyI5F2UlsX9MLlyW/cuYrkAZoj2pAX3Yw/XmQeHIR8sik8Cq7x\nm6kFLpNtu4bZkVPuO7k9rtJcu/VkeEp7GuQ1vH9b54kTznNXhll7WnuvgYla\nCzHdBCGe6/N8AOR26UcI3EPOXNj5+epqFN+UaviB0jbz/WlNVBosZsWCP/O6\nFbvsyBeZ68n0xTLai4c2K+9d286cLtHwDt0ilMJeGbBBpT4XO9CsRqUBHYGu\nbDY5yLeTir1QLveT6cGU+xQVpsu3GxQS0JAlSi33H2tZ6bouy9xg3nuhaNW6\nL4aR1kGvLEegkBqh6cbqRSvBOkG86e9Y3afcGcsYBEn3hZUBVXojx1cRvUjf\nF4qZ\r\n=XUN1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEuoRVnewJdz46DFZdl2lazdXRzsrAfhJfoYybqZBbFeAiBN0iwOKsw6dOEaWoS8QkUGn2mLGfZMHM0G2F0pIYbEGw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.d234ec3f.0_1626458897894_0.10606613955345523"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5cd4bcdb.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.5cd4bcdb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5cd4bcdb.0","@material/mwc-tab":"0.23.0-canary.5cd4bcdb.0","@material/mwc-tab-scroller":"0.23.0-canary.5cd4bcdb.0","@material/tab":"=12.0.0-canary.9f68a932e.0","@material/tab-bar":"=12.0.0-canary.9f68a932e.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5c053f1de07d32aeb409f327470360f0b5c02ae4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5c053f1de07d32aeb409f327470360f0b5c02ae4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.5cd4bcdb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J9CRJ7FGyQ5Zqgr7aJUJRtcmp2FuFk9CfNLS2N7g/50VtDlQfkf0NlJ2mIoj+t54TghAFmMQkaSRT9FyPBqQlw==","shasum":"00cf8fcaa245588563edc7bd978ad19a272d07da","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.5cd4bcdb.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8fZKCRA9TVsSAnZWagAAJ9UP/jb1lY112MLOo6FjiNOE\nSpc9PnourympfqWdDrVgMjYolhRtogMOyt7b3jeM9qCuz58BKcIw4JpKHgTQ\nN+7Cf8jIce/QDxgF+Z5yIcXn16KeVSCs9+hYM0S5x9gE0qXDFISwkvLnsbj6\nOIaUiRuUvxJXNiqk6IRDnpElrLGffjiVwGG2u/T+sGdvYW/dyDTgkFSMQ653\ni+UJVAlpBt87xBhiCW7bRc+Yl/+TJKGhroCiPca/o9ij4d8be+cHR+wVEcue\nCw3LyRxr2xRhJNNn+ODJMOx1oT4pwi/WPhd1kvpJ4wKuWxQdxZZVZEhFBFdk\nd81spCAziYQ/ZunzK4g0J0csNjGCC89X9vmwLHb+cLKwg1PaS5VluEE9jFrB\nNhUP2FjemgOb/w4A8Bq/Xtse3AJUHYe84Kas1/QKsGoWpGZRPj4A1lcijn15\noqCRy68xDMxUT9NKAUpHrjFYzHSO+g8vz3YpPNc8JCsIJaaabD1zBJ+etRE5\nQc3BYdRNET6z6/s4a4lS7VFxvWRsmLuDeI8QJiLTw0nT2sJHhOtVr+uz9keY\nju2/PEiiLarRV3cRRV1KkDXAYSx1pPsHVefR0+8AFl8vpoAO6Xbt6RghUySS\nxvGRvexwAZg6xYHD1lMGGA04JC9eoT84bnwjNHl92R3Z8FmcnVNQ0MySfXlQ\n09YQ\r\n=zKCG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBicg6nx6avxH9aT8vdwnz4QBV95nIB1xvG+lUV8ZFPFAiAbWU5F/Q1XeKnopjdCSEWGQZNTXLn5lpX3cc7OWtj8Ng=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.5cd4bcdb.0_1626469962538_0.6734920900720403"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2b133cb2.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.2b133cb2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2b133cb2.0","@material/mwc-tab":"0.23.0-canary.2b133cb2.0","@material/mwc-tab-scroller":"0.23.0-canary.2b133cb2.0","@material/tab":"=12.0.0-canary.4d95812f9.0","@material/tab-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"72202d1bfc4060bef4aa100b9593a5dd27125d0e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72202d1bfc4060bef4aa100b9593a5dd27125d0e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.2b133cb2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-X+rbpAE9dh4W4l3jiq9E2dfMVce6ceXcwAExjqxnYICPEgl1KAtNDNNhV13Xmpq+EAFyg8DwWokXnIYqrcZ9cg==","shasum":"ce79e2e8ac5ff55ef74b7ea9fb2197c07ecbce35","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.2b133cb2.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8gMNCRA9TVsSAnZWagAAsN4P/iPVNP0caF4atm6FO8rH\n0FaxGbgaXIjmoLYdTQF1U+nckgVcCl4lhWXZJlixmARN5aAEGdFUjs175CnI\nj/GCkK0va4tQcAe2+XcXjk1A2XnwjzOiZwgJ8vwTPAaVEeQw+Cw7Zsjew/FC\nTdA9TJWBBaLmPQidQWGbI5uYeaPfOVHDJHYKJ30jFVAezBQE61W+wftgyZeb\n4X6inllvL+FarAkdZ8AfITR+15h0El8qm8Bsn6evRU7x25v0iOkz3hJ0vki7\nAh3uUlZlOxwJCMzS03dtidIYjM3yDdWTOJRLHBIc7XxQ1pk1WmflFvkgtJGo\nVwpzDQCXcr7in+WZFA2DbjpRjSwxkiUcpO6p4VnyhyH4EBzzbbPvIuoLl0/u\nbJLFLh77Bs2i87+7oFIE9rNXH7gGuJCaoVkL2yP9CVkKo8S/RvpnsCX4RUY6\nJksPQ4C32c2heONZXf/loHdmq9mUMs6Hai70Nz+/ULB7dRexbL/FRAA6bNZz\n/1NRTkV/fyGmMXRbbRU+MCWCH4Vc6Q2CueLQzh9y+m3NfDuxTNUjs5BNRzrb\nhTOlLLLXQsaEMIVD5RObGsaKdb5/oj21mSxMtJrvRMxd7n3dkSQrX5WmlmIa\nCZVRwZJ2Ywd/0l8PKejrNK8XcoYihDoQc3FtKAULLQGVd5j3Z/rT1CWHjjG7\nuLHl\r\n=j3E9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpe+0vfwYAjOEhSut6JDrqyHMribF6tePEC1MsDHaIGwIgUJ4bVYCWLxA1Eu11JRuPskOovADpfiiSXLbiUgLJSBU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.2b133cb2.0_1626473229139_0.660669766283275"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ae4f422b.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.ae4f422b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ae4f422b.0","@material/mwc-tab":"0.23.0-canary.ae4f422b.0","@material/mwc-tab-scroller":"0.23.0-canary.ae4f422b.0","@material/tab":"=12.0.0-canary.4d95812f9.0","@material/tab-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8bddb410bdb60fa3790691718471a6b49c3f8765","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8bddb410bdb60fa3790691718471a6b49c3f8765/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.ae4f422b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-D5NpiOotXZY+ET5u94XTWViT7PvituJq9DD82y4u/6vtZi1rflBgttGyoz7WWaE2cNXOPuBygnzWEN2MvK2GxA==","shasum":"8d75cd77bf1d22bde7908cc5cd5f21980cd5b26f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.ae4f422b.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8hw9CRA9TVsSAnZWagAAiWAP/jzyjBwHP9Lb/WmRxMo2\n3kwGZc+I6affkYOg3nwurMKs5m1/OjKfx+lVn5bHkXTgK4BZjFYKirQj/JGY\nOkoHkNZXYGHIFBvooC6/APcjLwoNw8m1QGBnC73DkrzI/HECjTO5wm7StR+K\nr0YTNS7dhc40aZ8x5sI5e/jYIU9fsnWMp801UqYJMtmyEkKndHYNpkZHoENi\ng8IBZjp4m+B8i2sZNC+mVyvL7x+GqqRIDpwo4xl9XnLQ3DARHyZyGAO78RQ8\nRpTzAuKH22wVvV4b7Q+fVSErew/sLkpW9mJFtkhnjfz1Do0Zfi7+Khk6d9Br\n0L3EC4aR0noFZoaX/4iPOBrWY3/fiq8Hnr2aa3twbxeXmOJkQ65loNUUda30\nnpLOltBWMjPJ3x+Z0LBGYtDxrnu0PV0lt4qs6949DDhaPVQcGDfrlApYjxcK\nRM20L49hI6I2rCqwYG90MHU5lQsd+9nHrG7S46X5tIHVlH+mRAivYEOtXX/p\nqKulERt9qzozRwf1eu0pTYrMFqM1udHsilMvahgHoN71mPTSdcveursuouhk\nhLjDJQ4F4z+bwKtecDhKMruq5QhNSo4DpGEBWkMq0Ko416fsczPglbT9FoBO\nRU3IETsKih5yo71ZiH87VewP2DvoUmXgmbAbjFvnrdr1GEXUK83w3PKaZ9gA\nQrhD\r\n=5p/H\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDHAqnd9s7i6gHKcU+JWL/JIRBGBImQTGgDic0XvzoBpAIhAKxjplPsvBIUCj+OmW2NRA4Q82WK/tcCVFrlh2F2D/+Z"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.ae4f422b.0_1626479677193_0.6191230747149683"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90ff8057.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.90ff8057.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90ff8057.0","@material/mwc-tab":"0.23.0-canary.90ff8057.0","@material/mwc-tab-scroller":"0.23.0-canary.90ff8057.0","@material/tab":"=12.0.0-canary.4d95812f9.0","@material/tab-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f90c69a94171ac1d67bd6c3315ba759c0e2e79b7","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f90c69a94171ac1d67bd6c3315ba759c0e2e79b7/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.90ff8057.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YWZI3cnHLR0JcGAx3tNe4spASkdaCrb8AYwPb9BMzTdPEyp+8TKg+j0eL2Qv+wUhkgIBJtbzbMKYsLOpwKIasw==","shasum":"ce3eb2ebefb303226add80cc73cb1046bf10fe08","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.90ff8057.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9YdRCRA9TVsSAnZWagAA2j0QAI9q0ZiIa/x6cei9OUFn\nN5Wvq9LHyY77nKPEKmCleaWSRLDD2sWJMJQxu3GPUu5iQ7OKTb4y8cbnb7Iy\nCwIshml5mf5LAEw/9/1DY1ihbXrwUZnJCF956sZNjS6YETObbSrc+eOhOJwM\ns25mDCkj+DBBOkqKfrck89qeKQVUv6iAFmHwikE2v8073g72Ogh9pV24yBiS\nHjG5DeL6V7PWlXOXIrMyrMvpITxbo8m7lZnXgr5X6GWIkAirVnCyjSMAJc7L\n8YVeuo7W8x3A9hRC9JYO5W7jUQPw6TGdXLsi9WB9GhXTsvZrPjT01AmSAFVz\nbtxa0fkjRH67ZoGOGZT+CXrNW3mhYIiU1HoJVTGfQ9axqkNdRyaql7gMMyxH\nUVMRvYQRN9/p+zWXpzD9EIPq39whFd5srRXEPlQnT7bOvarSq3iGqhbJ9bJC\nKZ5hLyN1Y9HCK6zwhniAv6eBeCkaJcVl7liwVd8OxKIoogfFROKrMArgHGEx\nRvLo6MafKWQBbmOHpDn64n/WYHuVvkIUkZHbK6j6tA9YEw8skrn0YZWXZ37/\nV1kO1gziG6YWV6hvn0ISuhumcvPi+dOdtSsYOw4QJjVA3D1QApWNE3sLLHr0\nu5JN4VtIMRGekjGFK8DSC6LnsasEPW24k6XnxVAiMxmBHrNXzgRIyY4qdUdd\nPBso\r\n=TqmX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPoLrh1dqf5Hg0om3FcajYuuzQrtdS1TXufQN6AZn45AiAE1r6+JdiZxVCtIaRdGxgVVNAFd0iIUkYWSCoUVcfWgQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.90ff8057.0_1626703697873_0.397398588730568"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dd7b75d1.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.dd7b75d1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dd7b75d1.0","@material/mwc-tab":"0.23.0-canary.dd7b75d1.0","@material/mwc-tab-scroller":"0.23.0-canary.dd7b75d1.0","@material/tab":"=12.0.0-canary.4d95812f9.0","@material/tab-bar":"=12.0.0-canary.4d95812f9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b0752e4552aba84ad89d4eafc1a2a995bbfa0607","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b0752e4552aba84ad89d4eafc1a2a995bbfa0607/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.dd7b75d1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-N9mA5vNSHUmDZO4CeuC/8GycMMWqOVZAy4k4ObuOIHOUHdFG7OI9oDPrGKXcTCkbq4/qA/hU+e3E8Vq+yAvGbw==","shasum":"227c01be6065c4fb6f5c323c4f02871f06567a02","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.dd7b75d1.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9buVCRA9TVsSAnZWagAAV+4P/1tctc5dI9oJQYmDlPsY\nx+5BAFWIZAt4arC4wVENQjZeGNdiZ1rhi1g+F/OkI8bXlhvZodp5ivUssEJJ\nbmp0WIOeUcrX5VlDY+98tDYJgWZDUPmVvpLJ/4cBDxqqjmCnsFQItvTYHn8U\n48ns/yfdrHykG80zlp+mKoi1GNfS0HGcbXr4L2JvD0LhOF2MIkI4lg+tkYbZ\nX7TCZY3fNG6EQot7pb6bXUyEwplKIko3pSIUg8J4PAsLr2kA3z730Xvcqr1O\nCjT9wPdaMqLlBzgQy0QUyIA+iUgzkf8EdsKwOUTZ8+6faLcxlpMnFe6VNl2Y\nvm/62H9W0ndvd3rQE7V+6SCVceZbwEaJGETDTTZV9HLmVD1x1JxgPeEYlXlV\nCtH1v+8qSsGbmasrNWvKSctKd9D10QThO6klOtMaz/A1Xwm0e3kHLmQYqaDC\nfVFc/4y3G/powwpgiLa7bp6eXV0vaFT8uuegRlckOLzQppve9ime4q4ZWiwG\nBJWlq8hiiSXHm/6qsCPUPATvQZ0g6/U5sUl5BgosTaUEMP5nQz66dcDWEbCK\nBLOLnOhwndzojiWIqNzQuMVUE2THS+Up2QVM2t9UWuHcbYN3mkrJ9w2w/fQW\nWrhit2G1AEMnz7WAbJJvbWz7MoNzcpbEQXahJ/7ZaxysJJuMMMv8grhql0n5\nbc7B\r\n=b0Uj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID52Og1tW9OaYBtznIfT485iRLShZjt81IpNDUMt+JkwAiBLrKNphfhV4e5epNZUlXcrvRagg/1IrXMAwux7VdyCjg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.dd7b75d1.0_1626717077034_0.7863441697142837"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.104debd5.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.104debd5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.104debd5.0","@material/mwc-tab":"0.23.0-canary.104debd5.0","@material/mwc-tab-scroller":"0.23.0-canary.104debd5.0","@material/tab":"=12.0.0-canary.38d1846cc.0","@material/tab-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9dde76584b6e4258f93d65b54a1f9695d2dddb1a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9dde76584b6e4258f93d65b54a1f9695d2dddb1a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.104debd5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MmWQIU3uoX/rZfRRxFfYbipty91+hMF4oEuhTC6J2QHbQzMq5IrZXVWfiF1jLXwy2tLzru/DgOhveV7PXkoLSw==","shasum":"836e804894854adb9b0033e5a965571cbb054493","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.104debd5.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9gKQCRA9TVsSAnZWagAAiF4P/0hrAym/XwYcB+l4fkh/\nonJOpsvI5arSG0lBGCDDvOnwkCd7mLrT0tlfO6Npz8jOU/qPsQCzBE3GsApj\nGbiszsbuCdkhsi2KaDwl5xVtiZPNSNyyC8VgY93/rtekAzgzH7SadP1sOQ7p\n1AnHLql5W4z87S6dy0sGpICkNLYPHUNgg2wyL3vkd5wlEJaWaLuHKRzkRQy7\nK7Nir5Mam8+dcosEiFP9tt4JU2Hv5+M2rAb0/AJJJJtYTQjhBreS3xeVOhLi\nSBBJK5azRVMccQ07QsXsBfR3eC2Zc4i600Uq9Jlr8QaKjh2S8xgWTuRJfqbu\nG2qB9HmroVKpJLPhMlQzUCbh92CzVHeunVa5wWX0CzMT/FQf7beWQckZB/ut\n1RB/9be08K3WxTHGC6LtcvrHaKQvOIe+fLfQaMNbRV/G0I8JkNBKBCAObADX\nQrU56OQd6+MgiI+1VmE/Ceg+JgRC2I6OX/PkjrabdBoTzQqWx2I4Ik4GR0E/\nR8xAGRcrnUE6N7C7shkzemQNzHmLMo/mjTpfxEUPXE2qlUGlWa+IaMhvANOv\nweJgjG/4OrY8uiKObNX3DNelwirQUKytU2wIzjrYvhVQE/UKSbkw2tkJk/sP\nVyzblxwPSB40XHF6oxtZ47ohXgh6vC7nwfLMf3FBz6AG8OxSZXHRGJ+AdDQo\ng5xK\r\n=W08O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBid1v8Sfi7wwGU1Agq63rDf2WgrS/djZRYqXX0KiMcwIhAI1R1mXXSooZb6wx/HAijCPUg8IIv3EsvxgyMs1zslhx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.104debd5.0_1626735248178_0.5036279871844447"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4612705d.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.4612705d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4612705d.0","@material/mwc-tab":"0.23.0-canary.4612705d.0","@material/mwc-tab-scroller":"0.23.0-canary.4612705d.0","@material/tab":"=12.0.0-canary.38d1846cc.0","@material/tab-bar":"=12.0.0-canary.38d1846cc.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"28f0176f44158c2fa7246b69d5737a09425a6e4f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/28f0176f44158c2fa7246b69d5737a09425a6e4f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.4612705d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-upxIxIVNp0KDgnDSSCzhv+Gyk6HIM19S1r+yJeAHdWWvY7YkBlpYSvIIjnRIER5HHKtUwJvO3XQmeYmH0Q3b9g==","shasum":"08c39aa3080e3a639fd001137caa8f816d006529","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.4612705d.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vQ8CRA9TVsSAnZWagAANhAP/06K5H+hrCFW8vaktpmm\nPbDhBf1bv3+WWaP6OGSOlQEQ+riwxFOtEMFDzmtKUM/h1EFP4I89ZbgWJtim\nJ6+AVddlED8BIgBuUS+0/YitI8xoDS/GY3tsG0woIvRp7/k/dEelrfQKhGA5\nDxyicEiN6MjzxYz6fsJ/jfGCA5m+wpm6M6e2gjNhFD+R5PdeSHp8/bO29S2N\nxcZF66zfstpVFKixMyvAdisj7JEshir0iwnj9c/GliBIdlxX8rbdk1wjUvDr\nCOLm4mBzLFw8cA9Xp6DebBoU+i4X1smW6bjsiaJVtqcYCsnAWSk/r1/R3eO6\nCxp9yDY2eyWc9IwLzscK7vLwFuN47n19qhmeZLgYQxWq531OJYZ4ipm2X2ea\nohplY6Oox9vPFachDWXyLcVVfibR7TSjVpBY9bqmwNlYPsrXUoNK/c1Q3s6g\ntykY6u8oev6WomZ1Rue/PI5c37Fkf4cnIAO+2NTifj7DD1njNFEZB6TMz4yG\nDo3fws4nROBtvTWbPWrGNyWiQG5zooFd53OFvlnvIV8aePvANkHumw4jcwzF\n50JTv8H9NP7Yocm9cI0FfV902oeGdFiav60UPk4Svx1S78FfHZ49wW8JQyXX\nTVdpu/CCfvnfk9qFzLdOjZwMIJRJjuJWhvuTlF8xkLvg6mAgsR0vEG/Tyg51\nPLNs\r\n=b9TP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDduxmM5QD6L4nvqOCmCQJSUbULvNsOs9hAUTNKVSxGjgIgRKZiB19ivFx2NnrBKz6VCnO5DfwB2lCQIXM0YambtDs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.4612705d.0_1626797116152_0.7791463443999349"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.b36502a2.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.b36502a2.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.b36502a2.0","@material/mwc-tab":"0.23.0-canary.b36502a2.0","@material/mwc-tab-scroller":"0.23.0-canary.b36502a2.0","@material/tab":"=12.0.0-canary.6b0442278.0","@material/tab-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1df0a9b6912d747311691d2320eb16519bf8c660","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1df0a9b6912d747311691d2320eb16519bf8c660/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.b36502a2.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fTNh7mquy7SoMn/9/5e8zUv2uIbyRnUOV09irOlWz2H8NvKa6qRTVavMV8HJQBOXAjD0JujTaAiFtJvuKhjefQ==","shasum":"6335b2474ab51d4dcb3362ad30e35d069557a1f0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.b36502a2.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+KEgCRA9TVsSAnZWagAA4NwQAJDwuDDKZnTjKSnX/dXZ\ngEAJqnwxM8HXPP0pGpaLOF5CbYWVeleNdp6H8C7A1srAzYOXHBDHBgk/DisS\n/CqKo0dKR1dJwbYBYyRw28oRRdg2F5QWCKroGGqPoo5mNpwcFuUYSxkPl01s\nDXcYMrKllc4t4JXjq0zHKLTbAqFzzT3oras/vskh82OkSZYG3agVGGO7GKMA\n0QMr47B3sB/APId+H0WglICIz/zHGJPhcOvUVxEKIzrn9ZcZl/RdBsa2ZMC/\nehqellWJM0QKizMlm1Sobz9sjO72vyMFgj1JO/FkK9NFFYrjp2PX2HKwzalY\nnHj6ZM2DlWnpJtJZOh3evwboO3k77Uv+ozDVuc3HL+VBZbvJ6LI7DJm8dZkH\nwNSSfv8Y7R8dgbXxTFUbWkQpa66aGXmRjXwTpb/6vfasy4EUyaVUUNdAaZQf\n6do7hJW6w0qJKIkV1aT43zFO3EGfEST+Y2lXtawTh3kLa3glhijsDpSgxcdl\n0/RtkSUd5MBKVPpPjw0iRmJSaWwxz53+xG0SLtBMmTCop0Eqmxgrvf1LmvXX\nEIQdycM2sNrpe/o6CRHqXquzuOTuL+gC+j7Ny4WoOG2CB5Au0KuaxWKVo6QR\nZ+E2UnYJ7chwr0G5VERRDcDEFTv5QY8Z/iM4VBl607bk58/2xLuOFf8UaE+l\nS+2o\r\n=K5GL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCn6lSvGzbju3Yx6xVJjqlBzrX2iNJ1anrCaxYkOdcZTAIgatEFXUHWcBdndDaAVHds0CAdmamvXq2PFI8gkKGdRzc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.b36502a2.0_1626906912050_0.0037149433672039045"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.2c392ab3.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.2c392ab3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.2c392ab3.0","@material/mwc-tab":"0.23.0-canary.2c392ab3.0","@material/mwc-tab-scroller":"0.23.0-canary.2c392ab3.0","@material/tab":"=12.0.0-canary.6b0442278.0","@material/tab-bar":"=12.0.0-canary.6b0442278.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"83a61c9efee1610d42af318683fe4985effae0df","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/83a61c9efee1610d42af318683fe4985effae0df/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.2c392ab3.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wh9Y41vcQvnLcfRz7LVuk3XTBahfpAoScZQxRvbDb4zAv/BSSiqsWnD01LsnVlm/WgNe+5CmCy1Q59n7EBrH9A==","shasum":"cbca5ce6bd251c0ea61bad170f38ff5a311b067d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.2c392ab3.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+YZpCRA9TVsSAnZWagAAqJQP/15Y5PmKbzJy/IOm1PyX\nETBmGWIRaP3/nYuHnqXuPZ9yF6zA5Egck33cUABq8UhncERvafMKi+qSByPk\nZRpElezr7GQVJWK9gVNby/1ZoKxvig2Jq8pD1U9TaZwzfcnxg6ayIGMx9NgW\nqoBwe+Tlt3eXd5vstPQ4oQHisERXUgk2x8MSI3eO6oSv+Vqdi19FYeHrKr0j\n79YqpBqzCf6/ipW3TKQxt1LWtadHhyRjjtFpV1RYJ+LG0CAj52x74zhCbEqW\nLtkWeVsI+6WtMox9jk59GSumBCyd9Wpa7CO7s6JO2UUpI+MtJ6SqSzkEJdvc\nd3RXj7wgazgi/27JkTdwDa0+b/ItM1fATAPuVFSeM+xrzCFWbTCC41WI13r7\n3VBj53ZKT7E7GX+GmDqtn5KYPhzqagw093NYYuboOduASPPTi1AGHxwXqACm\nt24i3ZOkMx6+7msE2fw9vq7FH/msXjeemsxAwz9Zc47C1pMrq3qW8yNYKKqT\nEkQ+Bw/OLz7ZlntK+MTcjvBPZ3KLOSLkguQGd/JsRkive2jLw9H6+NDdhfug\nGVtmZ7ljaVLnD0aRH3YggE3HC9P2+R/hnOdoS9TjO1Wc92k0tEWtmbG5gR9J\nRueI1w4vmFB2zlq62jvzmCcY1Mn5lz9QDsM1fuNbMmLUD1fk1o7RHxcuj/Sv\ngC6y\r\n=KtJT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAfqC3R2IekEAOl5+d66pZF2gDJmq+maVdC0COkKrBkQAiEAoDIYTn84+qeVCtis43qSpxYxAH/VFxuzc6wgWR1udnM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.2c392ab3.0_1626965609439_0.6423882131454908"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e8bac95a.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.e8bac95a.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e8bac95a.0","@material/mwc-tab":"0.23.0-canary.e8bac95a.0","@material/mwc-tab-scroller":"0.23.0-canary.e8bac95a.0","@material/tab":"=12.0.0-canary.5f00e454a.0","@material/tab-bar":"=12.0.0-canary.5f00e454a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2215253d0031fb9db27cec4c40894bd549b72930","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2215253d0031fb9db27cec4c40894bd549b72930/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.e8bac95a.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-dD9lD+wQ84eXI2rwd9tNY59Ro3rgLQogxZ/52FuCoCFcOkDAOHmcjmbjg7ra+dABxa/MTV0RFp+A6HluEghRKQ==","shasum":"0a39456c7bc9817c647a69aa7e5e6674e6aa42a4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.e8bac95a.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+b6mCRA9TVsSAnZWagAAlXoP/RyVuzymEmB2gDm0ZTHx\nXcLlc9MoUlb0ljQOnGITYFb0TMtERMA1k+N7sfm/H4i5UpbuwRco2FVDqmKo\nhcA+qvJG68+cfzfmYkVVfrfSiBMP5bX+q66ql0QnArbBeT+kxQgddficLEyX\nqHsuRLxY+82gXrG1uMo3CE7/Tzc5yaZBp4UHesSzDWmkhEt73RxOg8JXg/jn\ndqGk6lhKqoL6KEhvdnNvJQXtbFHnsuINAd0Dw0xWpwxwShpycXgGGHZJP+TP\nfjTnec9tTBzCJRP+gUXsTJaR6F0Ihsari4/BaxvDmEk+dJSo2Oxl5Ld3159t\nHnMPkZc0eYu4Fdyku4vzOO1SJqblMpLoMG1osx/0bhIa7OWBwMk6Xk537GO+\nr6foEyoF1a/hV0aQGw7nus/f0OPEdUbgHAd4grgSmfpE8Bga13FUOnHy/dnE\nBrBcfh5yQoEBrw3dsGewyu1jmDbJClHR7ojRG9AlyALG9640HPpoJz0owCxb\nBGTAJVzgOx0QOYFelEQEuBDSeGPJiYCf4h8KjNSZbAkBaXRU/jGGGQuZSsqW\nAaSM6bVxUg8mTTGOcTgcHdvB5c92ppV5iVb3QQxsNC64H7uumHq4OB4i7zwY\nNsOwN8DdzhgjE5XwdlX8ZQ1yVG9g88P283V5l7s+4GsSrLu935753smDwUhY\ntHSB\r\n=dji8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFZbtf77qXW2W7qswXXS6T8Rtu1dUcUdX1bL5+naY/CGAiEA9y0iS4o8m9sdTtGN0PvqOjNjhYohXputQsnCr7Q9Ww8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.e8bac95a.0_1626980005855_0.6114223975279907"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.38f29f8f.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.38f29f8f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.38f29f8f.0","@material/mwc-tab":"0.23.0-canary.38f29f8f.0","@material/mwc-tab-scroller":"0.23.0-canary.38f29f8f.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","@material/tab-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"484fc84b540f757ad561dbea442c8566694496a9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/484fc84b540f757ad561dbea442c8566694496a9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.38f29f8f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DXkb9DiSBrrBBplxYJHsGVaU9TuxQeO6TOXzTAzjz/AZs8ZFEmjpqDEjnzSNVklUMhj0wlfvpmGcMrlIJ7WcRw==","shasum":"b10a5a78cc2f30fc2fa3c9e4c75875cd43c911bb","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.38f29f8f.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+weECRA9TVsSAnZWagAA01QP/1/aqc6tNLG5mT2QKrK3\ndbtM7Ff9MAEQQwlCoOh9tM8m+VMgJsD+BIGcDXHQqYUQ3Ntv5DH7OQOzB0tU\nvirIBB0Z2rwYpYLuDv9fj9WcYhlsnnjeObqL2KPxQqLPlPZHa6g+uhTA0Rq3\n4EdJXudEbaUzqfkhQGWPslM34gZvLWV3qE3tLg/qTRZjmUDm8Fl1Pgbofct0\nbKKmjMna57G3ElC38OTLzR8TOBjNB+NVVpbUTzB9brtsKSxSEVIvY9s0T68D\n4GWIN0/CQbRX2iEKo2Grzxrj65l48//icy86ApyqZTiSL83IiE1Spjiu5kbj\nmodv2H4iLDDIkUWHrjNt6pq2MFRAUD/RTK2fnlrwjm2+8g6tQWkY1Yq5piJO\nHx3Vrq06Gosg/+46nQUnNMrNdayjK92DpDew2kfJOW7BcQuR7kN5+AS5LAO4\n1ShRLGzBiXzb1TyHD/y5bnAKyx0ElJJopoAxSiTI+M/z3tNoYr0M9OotiU0i\nQ1f015o4CaFNTSquPiOKIl3mge3Cu6Wi6+WmXw7pQZPwPHV6oQ8IjvDB+9+w\nWNbhqpIUAU46U45jg3bVRU7gbiT//xui2AmOByMfvRpzFmeH07yjuHg3kcWY\nWs234mOG70ZIsr+BjaT3Q4yaiw14xo63wr3aCYzeW48OL35+d/uPFLakyFy7\n1OzB\r\n=wipa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFCJhJ3EHIZ9ahNf+yrINCbxmsypnOXlpoj3xLuE+AsuAiEAljGqUXBXkL1kOUKURwosKdpB/sdNYzf+c/J19ANtJbI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.38f29f8f.0_1627064196061_0.467566139565863"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e0693475.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.e0693475.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e0693475.0","@material/mwc-tab":"0.23.0-canary.e0693475.0","@material/mwc-tab-scroller":"0.23.0-canary.e0693475.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","@material/tab-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dcaa39c4b4b0d5d5bda85df7a11ac1205f2fd669/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.e0693475.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-TBI3vmUeCg52xFArQJ286ZY3GVvo2tzSesLEd0lhZhbVivnpYHS/oorhhoguqS1webRMlaWxquGu4RGmtOWxcA==","shasum":"cbfd0cac9bc37a72594054594696e756f3b0599d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.e0693475.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+xDsCRA9TVsSAnZWagAAiz0P/110tL2yJDAFPd/j5Att\nubAU4DTB7w9ki/0DTRER13QlhyB3PRao5uf9ER9Kl4dBdBk+TUZK1xEwEy7y\nESKiYMsPVB8xWWQLWrWsmhxBJRB0jjN4gOKvICwYeccge7boLFGMLCef9nJU\nFAELxpYHDl+UFhttNePcOYGxqHWqnOjLd/T0y6u0jHGeRHdi0e7SICNFLZEV\nJB7qBB4n9qdP1wh5JDZeFv+FfW2sj5yt17UyGQBkV55Z6uBP9eOiu8iTOs3L\nzU0jyq6uzLRB/ezCWQe6ZU37W2T/MY4NU3HXdKJEcJlzK50yLlQ90rQleq87\nH5XEk6hDgaE2xXlFG28gSNEbmxaClItPWE+5BW0D3UWDxyRgJ1crAuP3pgAV\nYfJDmVhK+qfgP3q2h9UrsxqXKow6L2G48XBxobZ1PGlCkVYFkUbNfi3s87fv\nEK4Q25/tSvwSZ5eA9HihgdD0R/L7vbyuqYrsqDZ5ZsC9IPzaHFHaYPAS5t0O\n/5mf2F4HPh88o8xoCYrMWGLEnlGYdoB9rwt5y2781XuakBPPhtaYKgl1hvDE\nfI1iTIL6khwEXP1YkLrif0oOl4CF63CJ/IB5JgIMO/wXLKIxGDwWkghsUYAg\nJDzVn/CqPs8hP+ibAbSFTYdTYZF2GJyKsYrMaFWGCls7S9lQgyaZdSpZBz3b\n/Tl4\r\n=Lc3W\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHW+EI8JeuPI4V8BmwYME2FvrOAqNKuy6rSFcJN1/84cAiEAl2w7vvGflJoet97gIzAiPK3KsgnNDK8B+ZrQgRRmKUM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.e0693475.0_1627066604857_0.3234096348167468"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d595e030.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.d595e030.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d595e030.0","@material/mwc-tab":"0.23.0-canary.d595e030.0","@material/mwc-tab-scroller":"0.23.0-canary.d595e030.0","@material/tab":"=12.0.0-canary.90e08fc6b.0","@material/tab-bar":"=12.0.0-canary.90e08fc6b.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c8056c080cfa8a28ca6e2a5511b4db50a604a87","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c8056c080cfa8a28ca6e2a5511b4db50a604a87/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.d595e030.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Ee2LSuWuI1iAB3g0g+YyF+WM85LT9IsEM95OHZzKhDi5jngUqJNgwHxwh8Z/bAsXaD2AQrhEiWTPR5WA+RJeQQ==","shasum":"994290e5f357ec3cacc060fa2ed9ad13bfe7e0d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.d595e030.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+yxaCRA9TVsSAnZWagAAqVgP/3Nxo1GKEmczGgea9S3P\n/lARDx2U1wyCrc8A6MQCzn9yC7i/Ki241MpYvfm0P52lYnv9WTz3PLqkjWV9\n6fEjGA4XLfXfNW9uYrOpGPRbsK+3MxZvTuLrTXxwqXjO99KXMm94orfG7jot\n3R9XCoeCUU7gU8eJ2+wzL1/b2JHal1hWbRAIViKOXvs8ydUefvtiVtY+SMQh\nBPb0EqcddZB8qULjvdHzebaRArMNTudMY7nltCNmgVL+oKcXLd1YWQJFqCiP\ng+k9/MbzpKiUkMEC1OiBXBne2iiQ8CQl8a6PTcgdZxepB4rJ95jCLNOiDgux\nXWywjc3PIN1UrsfrFaewx8rjRO7g2yKv3d7xZnvpdARBQw0Rt7VXmea0rvqA\nRnTlTl5e6Wit+WZ1ygRMAemAERpTndcuL7JMQknDFmpVLdeXodlFA4oB1hal\ncFlCSOPMlZv24SbuU+lgP2R232O0czjVunVa8gv5VnxuwJvtfvXjLnNLaUvo\nl7jkWv+atSMRaPvaJ/UQxg7eLJjYbLgV0VXg09Vva7dB7SHutR/BKkFRGLoI\nrg8+RrI3+ZiDQISFmZqdqDQpdhroPzMe0ocKp6SN1CEvSrs8BSTnR6OJMFzP\nv8dFKGezcsAMz0EPdOOCXhEbFHSlDyFQFyGbJ/u6PpwVzSt+YmRmf/2cKx9r\n9Bbq\r\n=To7e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDI9JMUpXOup65scohn02p3TTbrhDrHNivZ+fKlDPY6iAIgZyb2LnZU7sqFQL4tuxNxiPVKjy/+bhrOoyET0gdLrQU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.d595e030.0_1627073626605_0.7824129181793598"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fe7cca31.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.fe7cca31.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fe7cca31.0","@material/mwc-tab":"0.23.0-canary.fe7cca31.0","@material/mwc-tab-scroller":"0.23.0-canary.fe7cca31.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","@material/tab-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"45bb0797db4a64851859f8894864015974863643","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/45bb0797db4a64851859f8894864015974863643/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.fe7cca31.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-DVrhQT87avolNVsSoy6JjPEeHt7HVCWEGwmcF0AYMmACGGo22M2+W4dSkKsk4TYZtGLB8P6+bZXB+9RBCTlgYA==","shasum":"de3fb4b2b0f142b805da434fb1bc14862d0dafb7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.fe7cca31.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+ztACRA9TVsSAnZWagAAulwP/1iiZGi8SGRuD3v3/3qd\nvuF0lULtHBRUYFptyx8hHWQ0Roq9Sqx0UKOcFgowmJNfOwvrS6c7MWYBSkEQ\nDBmjtGxfVyEBdXq9lBlY//IrpkQxtclwe0/ALM0P3bul28WZARkGos7mfJnY\nPkmy36Pv5IS8YWIJAe7oXrmi4Bgk2GAqz6E9OVRCz4h3ttEJPhvZbzMLgMck\nav8sA4kPSXMRr57JmpdGDPj5P8HSBjerhX1i0FXzHxkkcg9EOxoFZ3wiZIK2\n0MWK4l6l7Wv2nKDIRKSgBsQT2uchpYlh/BmK4YKhjryxG8w3ulCsqWvD2ecN\njI4X7KRu4w6Tyx+bJS/CnCo5QQ1Ss9kjBIVzwB42uorE+8CcI7WGnlaH7t4R\nEnMCPpyMpz6GDXEP2+VrPBgtoHk/uZyoXV66aKtmmlwOK+umS6DSWE2b49+R\nIrbRxMpx2aEL0uyL5KvppbJKNF3AkZuxKIarL/jsejqq1yUhSdmP6Fyias9o\nkPlraLVii6iSW5JYqi3PqTiGLoqrfyGHpWpn8a/Rv3Bfu9/1ObEpmxrK/tOM\nu4bN0pe64C1rDmtp7u7SjgfxXpHjihf8XSuilDRODyzFztDznMxhGBX10qtL\nDSLzojXeR1zFdTVmBp8ymhUXZ4M6v5MTjFQ1SjkNEue4fEMvqaEUHxdei5Wv\n5Mnw\r\n=lP0w\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEstaA9e/G58e198AIj656dM1I2GYX4rWeuj2sveoZoLAiEAyc6VGHwy2k7y2OepgEPHAOWeK+VJsXfnkWDYI392pHI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.fe7cca31.0_1627077440190_0.2570159440931812"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fd9da483.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.fd9da483.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fd9da483.0","@material/mwc-tab":"0.23.0-canary.fd9da483.0","@material/mwc-tab-scroller":"0.23.0-canary.fd9da483.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","@material/tab-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fbed5ae8e9a1f66ef1cd5e83dcb0db11c6ea3c01/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.fd9da483.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XhQp4UpOeN044HVaPMn40ROU5MczAF/vWoumU5PZ+xRlf0LpA6TxSXzqnpqU4PAhdkxfV6wrd9MSw8yRFphrrg==","shasum":"2a47d2c35598aff898112cf83243bd20e3a51065","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.fd9da483.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/yhOCRA9TVsSAnZWagAA/T0QAKTEIlIn80ggYZaddzhk\ndzWwEsjVOljTSGIkfzfiEhdHSufWhq6Pc634jJQUreQtOZ/I5TzKjGwA+rEA\nTr8kQwH5Yv8U9rPW8Jbff3z9Yog/WbOd6SSU4FevTtz4RGrARg7bloq8Kf9z\nzIDXr4iuofj15sBJkI/xYgqK4lZBza+CXiD0ekhZp70++HvieOusstKTVq+/\n4YKfEj+QwEt7xTRLfwaVdKbbtU4TPohIehDU8wEBN9OWp1XdJux5ewvVq16L\n2T9G7DKBaIzbAAn5sV6FQEaXMlTnQVbrTeSHUi6kz3ZWjxzjJW9V+IokxUu4\n2kphWh3tCuFB3GhVmGpKa2yjXjJtDvfwunFZ/z0RD+8ugvs08EwswJeO9A+r\nyWV/ynAdE5MpdVPXeWQP05hGKSpIjAkzj50cNxeit+DiIQ/XDSa9418LdQdG\nfeGYx5gzG3wHZIbkmwD5hWxecrG5rhqabazJ5eNtAx2fm5nmQaQQ0UtPfF7y\nfJW5DTrlc4RHy8MJqYLzYiEAf08LKKiVo6CfyjHvHrm1kZYv0J9Eugq6yzQR\nyFzaV2GJCjiInlVsciG1l4XcLGDJ76+sbHe+SMqieoePoznyjTOKz+3jlE2Q\npg0r2VKgcEPeJRH5T+dL5iMPcUGWo3H46S7FoCktABwyBIIaacZT8VMqpY7i\nHnTv\r\n=drUM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDbVPWFvNf0QGrxr5Yr+DvlRXe2Sq8PdZWhfo4xpPrClAIhAKdwuYVbKtnQHrRPLsE9HGmgLzrPATlp7XRX+nMr8IOF"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.fd9da483.0_1627334734701_0.6575870831197399"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.8a4c7e06.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.8a4c7e06.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.8a4c7e06.0","@material/mwc-tab":"0.23.0-canary.8a4c7e06.0","@material/mwc-tab-scroller":"0.23.0-canary.8a4c7e06.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","@material/tab-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c98d35e959f2149e2a4ca8c8a4c5a7ad3070670/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.8a4c7e06.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+/bhJF7O4EGNGlVXwBV6LFX9ZBi3u3EZ/EUlP4aUkuOJTLeVO5SWBDwgYaUgWm3qC39p5u8jiGJ7ylkojqn5pQ==","shasum":"23492f1c5b6f2ff832101b473fdfa889afa69de6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.8a4c7e06.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/zrYCRA9TVsSAnZWagAAOecQAISFEzZXf78KTz11y49j\n85w9/tI/auQCnoVhhO9UHL/XPXlNzlaFYHB2ES6czO/c7N7SFGbUHtTuijC6\nCEPOluAqxPH0hIXwSO3dF3HkHzByfNXLfU1HjHe530QaR64nO6132uqHOqR4\n9JEC1DtaK0kFy//3FM85/ue6YjNR8cdIreeu9qPA823NL0u3sj32AyUd/gWC\nudWUHxpZUq+QGmZNCG5mr1EiK29HFZOEy2mb2u3i5o1gsAZSPV9ucpDAOqRn\n8ib10wTUrRzo+Fs6xcURQNWtRFcVQWv25ZjANV2KDQG5SxE3pXEP19Zgz9d9\nIHmGhTXABlJXVev2dFjV3hwSBzTXZCxg1JEiZwZq7YN0teV8UoTZjbXlVpHc\n1eFlAVFKpjrBbuXYhfg6HcAARQG6D+duT2rP31DN5ZoKNEuL7l4Dfgbm1K//\nPaCNf0WfY8XkElDg/iwevAK4R9SHb6ROIcP+0he+Z77LXiadXoh4fuhheCQc\nXGvz0rPiKsG9Rybzd7h+lwGNn16SszkQMdgxRSDrRMOZmExUr/nnOlhCekLH\nxe2j1cPd046+Gu/zrpvQB3GNNiehoOAR2ClvWumf4TZKl1bzzlN2BsM/N3Zy\nyoMZtlGh1fm/2eswDMC+KuKR/LYN1s7k+VH9qmaQBkrOhoEqdBEVhc5W+tmp\nS8Fz\r\n=RPwN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC49WH2DkwW4BIhpeVSFMYuu/zfJzQyLrZMrNDUdXY7XAiEAyv71/zoA+zklQcz+Ar+ZoUC5M8Hcrx7hW1NPKwpFq98="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.8a4c7e06.0_1627339480200_0.8203394245051883"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.5b395fd1.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.5b395fd1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.5b395fd1.0","@material/mwc-tab":"0.23.0-canary.5b395fd1.0","@material/mwc-tab-scroller":"0.23.0-canary.5b395fd1.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","@material/tab-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"49947c20a93de615b923efcb7d30a23250ea6dbf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/49947c20a93de615b923efcb7d30a23250ea6dbf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.5b395fd1.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+pUIqvWz+ppQXJSAS+nOAveeytG/yyfw33ZrByQUBnip7MKBhEJbya2zuwzI9ptOGNtVmzWvav3F+DmMq/NxTA==","shasum":"4813d1c5242401f1439364b29d2e2700db6a9487","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.5b395fd1.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAI54CRA9TVsSAnZWagAANvoP/R3CO+1N5lHejX3RfIS3\nNZNAwndQ0JNNAhgIXruHVVBkvUmPL5mSXy5vttA4ZR7eXb+uM8KFcgsP7pQb\nlE20LHOwN6pLjexjUlsnEwSuw5surK8nvQaM4lYf7l0NTFhW4PmBlrNiqwj2\nKc/yDvRf0LyKKd19DWyuI/4jRLFKU94QSMWRKampJ3Gma41LZrp6rwaBrLxX\nkDKfyXgPFu3XWRUs/nmEjq2brEThRF1T81CH+Ql5o5ZG4x8hmQf6v129RabX\nJ2xHKvWZzmBZb1G0EpLMLRPHfC6rE1KXyzzvETDaISo40TmGt912PbPflYQj\naKVjpPc+gDoue4010nNO/T5MoxDkHH/BTJRwMXxXrwUwMjn4CippJcS+x/i9\nLzmFstq0ptIFixO4xwRl4ORtUevqVNwLukfajdKD2k6kYr4O8a+EmnCWod+T\nK7KYLK2LulgANSma3DBUS8WpilNttlbGA/BIYfIxXsO1jY3lvhOZlJgNV3IN\nKtrSdTMQC/kPAAq4r4yfZgzNyPiv7XcjLeVn2WlJZujrEsVPQVQkJneqMhsg\ne7m80qJ/mC9FBFqByo9izBH+j6YZZBDnFPZOUhzlXUSyREQkQMZYNCLtc9r5\n5PHCmwIiIVrDvUEiEKHHlBlZ9XUK3kx9Wx63n38L+QrVYI0gBWxi6AsRIR1e\nV9S+\r\n=kprr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYjniq2Hn1MoMolpCkfDx0hdhE1YI4c+O9BXNxjZIzoAIhAOxFRvLm9fGR/VchfIHyAU5TfPTW6eh8OdQrAtS1RDpZ"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.5b395fd1.0_1627426424440_0.5218505715572348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e5efdcc0.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.e5efdcc0.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e5efdcc0.0","@material/mwc-tab":"0.23.0-canary.e5efdcc0.0","@material/mwc-tab-scroller":"0.23.0-canary.e5efdcc0.0","@material/tab":"=12.0.0-canary.3f36ac75c.0","@material/tab-bar":"=12.0.0-canary.3f36ac75c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6ce7c9ba42d6630a9af68bb580b94e6fec508bdf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6ce7c9ba42d6630a9af68bb580b94e6fec508bdf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.e5efdcc0.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jbCDUNpjlKHoTKQCEhiFHyeCQExaMyD1nc4XiCqxTdEZAfr7JDXkvbytLzWTEN0iZ9M23qZUr5xYAl4jFgxL1Q==","shasum":"23ac7a7741e9ee7d5d16de1156eb0e6cdcba21e1","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.e5efdcc0.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZKCCRA9TVsSAnZWagAAiQwQAIl2/yjVZuRuX33omQzH\ngemvyI2D3b5+eoHRntcQm+SnRl8Fa5kYYU2k9ZU0SO+mb8iNnGoSz8+eDiAZ\njvi8TOZuykrnglUAzONYJb4pTk+GMXHHwFYSbJXWc+IkySrV7Lu29Q7BBZh9\nElEVSgeQ3vW13G/3IXu4ez/gxoHIavskr6tJAzZIknWtNGf6HKh88nBnuuE/\nfxKHwJ95u/1OwG+o6gluqOBYhAxGTEzbuwaWW8EQ8eJJo1G1ke+UEU16hxLH\nmRF7rIGxBm66vvg47JZNOveIHcGySeG8AYifqU3C5zDSNU4FQQnw0HdOvWlC\nNjDXZM7XecTadG6LZsocxMdcYCDAxy6WqPbNjS5038WIdn6ok2w9+EvRBqoc\nzhz+rY1nTHz10fDrri2yzfV4t5wzZnJssbRQYl2eLS5JaWdD8IsidFjx5j5c\nORznSxVOyfxDsBLqanzGx2F2ONw3KKBryzz7dtNE9+X0SkatEYq61cX8RARV\nS2aVIhMW72SZAd8vgWLnYdEVH71vA7wrIUFZKeey1CaURfSGVIamy9OMqeDi\nomfz99GQaWSLnhQ2Ar7Vhmy3hloFJalOA+9qeCL+y+rBFQal+koEzQImzR/1\ncC1kJhU8BdByZmlY5E0YtTpwhqrKX/sCwsjt64OCTpSU27lLt2zaXThIHBnr\ngp4B\r\n=7ko5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGUPGh/Ra6ZIIzuGqqhEzhY+VHxYtD1L1PHsf3/irYNJAiEAoVXx4FT0B/HyxDJLXJV3qg+yc0UKVJWJxkytQqkJkj8="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.e5efdcc0.0_1627492994742_0.6876928611685307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ab310900.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.ab310900.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ab310900.0","@material/mwc-tab":"0.23.0-canary.ab310900.0","@material/mwc-tab-scroller":"0.23.0-canary.ab310900.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","@material/tab-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"e3a3d97dc865cef9b5eee17c8842c3ef9be90dca","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e3a3d97dc865cef9b5eee17c8842c3ef9be90dca/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.ab310900.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-0tzrPG6DSxVEILQXVdxrqiz/IGr3IeHUh2IyYl/0tVh5LzYyc9t6qbW9fNpIaoLwYqC+mwJLnf4NmvE96tPFUQ==","shasum":"c6c604565fd7647b10139aa696e7c85a938a589f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.ab310900.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAbxnCRA9TVsSAnZWagAAhvgP+QD7zn009/Z5JQaOptbe\n5mMop2/1Iedj0ZMJXSVlky2i5Qc5RZFBA8tT/E8GZuIfVjl13284KJlqgtPa\nofVawXzO4Eda/Ut1oQOxEGSq+sXFstny5xN3LXrNJKuX94z5TEsquSmMPzcZ\nXMZJ7KeKT9DIpnj6jU6dnlaoEXmklSVhRuChL6b1IQr3Zx+6zDX+o1PD1j3y\nP5URae6Phkky0F0YvrU7joC/hKu5jjjOnKDliqG4ZNqE/R5ssQjuv0t6k59N\nwT23pgAZZIHNMdqF1WT/vaHdfmNseJ93BW8V5632GmgWejgKWMHmDgpFDYTH\nZRMBkaChkoEtcUdlzkRXUcMEulQWPMe3XC4s7TlskbFr+Sk75Nc4ffaNvF8d\nM/XlfHCGi8wezAyolJUwgCffhSoFvpZ7zK5QSU9S7H81Sq6ULV9rTjGDjGJB\nCtQJSdFWaTejbyd+PsBu82ANx/I62wfLsou6Zk4Zm7CigpP5aBvwa3WabHy1\njUMEv6rKU8UhtT2vFaqDwf7CaggwaThsxcr48RTjlxs0ieoRUgQO5+bQ7dW4\njAOOODdfF0OVFzGHG5mrCcGgzytM9woWad0rSqNdZJD7SvYS9skn8kX0YSMa\nuEnHlUakCKKLevgBpxVzp9I9E1tUz5hUFVJ4SsOfLod5vQrGkRSwtIOuIiVG\ny8/M\r\n=EQtR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG6aY9TuxI9YoLt7h9BtPcBLXIb/K7hBfGYeQ6wHOZBwIgWvjQZ9LBGQVKe58wG1FDZOrVBeNqrMztNUn7DFZlZ2Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.ab310900.0_1627503719015_0.31689621785054367"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21dc9bc5.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.21dc9bc5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21dc9bc5.0","@material/mwc-tab":"0.23.0-canary.21dc9bc5.0","@material/mwc-tab-scroller":"0.23.0-canary.21dc9bc5.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","@material/tab-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cfae2d30a40b9717e93cc7842d29f51de61c497f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cfae2d30a40b9717e93cc7842d29f51de61c497f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.21dc9bc5.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zeWkIUTnu7cg/EXdVrQPphiTwXTuctC8M+gPW9ewl9sq4qXNvFEBfcxRC7sQGWrJYoSpjCzs6PGj+AQvpj2rpQ==","shasum":"f7d7a77512ed0c4fab810fccb0418da7ce2b3f37","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.21dc9bc5.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAb2JCRA9TVsSAnZWagAAtMUP/16xTGY/+UMQX3EueX4o\naGxDsDzCtkJlovFoPf+y8bLNj+DH90Ffb5apbC+XvBLedJwnSIRpFzHuMwq3\nkVrufC5K5u0n+Tv2avh0WTbaEntK9USk4YsQ5STuf7hs5+YG0F4KQjTlntYp\ny7T9WHJDKQiIp0jHoNaKQjSk3mpCAUZ/iqbkSCSh+B4sMf5Yxm84gFZOaiK/\n2h6/sk/s008C7BDmSVYGPLIBuPeDY0VSKphi0pVGaCMidkGnL3Jrj0IfFeRu\nTiDquiWTyNuTi/6XqCo9z4mS6+UIrSKXHfYyg4lWjHJyRR8CXQH+C34yRzx2\nYZypKeu4cNtfDwEWUdcibzYxupaY/xyjnpU/E6/1bO89Njeni9kdLeSy5S2x\nvvt+X8MKAjsoWtD3Wb0bB4Z55XbwdKpyQ5y/WEVCQmm1Wk4MulI6ck9zf7Df\nw6VY2e6KndnklM9FAwUV1muRqegOH1IGWkXn1SuiQBiO6EJgEu76CBrlouox\nUCPfQGHH9l/I/qfuv0OLmnMB+SVSpXbF8nwP/nRzwBfnGkgenAeaks387zxp\nAtISa0V67jwH72Zy7VflXSmFjLN0jjghXXtToiMrM8nm3EcHf3fFon9CIs2Z\ntSQltcEZnF/hnLAT0POgNZVPfrcCjOCFNk09nFpc7VW+1lBnaXLmI2obhnf+\nICF0\r\n=y9wf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICMf2S2q58VDrFhfx87rFzh6eGl1309gsCsv83bbXvchAiBv/Mn41qtYECeEBgHFUJrjOi+JjmyK4rn9EtwsyvOtDQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.21dc9bc5.0_1627504009487_0.6681795828432682"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.68c7fe5c.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.68c7fe5c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.68c7fe5c.0","@material/mwc-tab":"0.23.0-canary.68c7fe5c.0","@material/mwc-tab-scroller":"0.23.0-canary.68c7fe5c.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","@material/tab-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d14f788b501a8e9e77ec19d160f45c10e76e3a31","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d14f788b501a8e9e77ec19d160f45c10e76e3a31/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.68c7fe5c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XFNrQNncePTpb+yXaVgGmqHjkNQhrRxtx9Uvr6QVtYdj4ZcTAWD8te/A2injlD8jmVBbRU6ijqdqxCRKy/8c9Q==","shasum":"0a98c5ea1f22c1f39490268cdb20c9c01e411419","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.68c7fe5c.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvQ8CRA9TVsSAnZWagAAbm8P/29N+fIL0dF13g9xlBj3\nBz8s5dZb/SG2sbPUcINzmuGAwdWsyz+2BheQ45P0P60ZmvtA7+xb5hAqcR5U\nyJcGpbhfj3FE7UxpyzIsPJMwDoJPEmxapL7YXcuvbKQvb8jTwreUG+LudpOJ\nCXOZoGDSzXNwlYzyv6rmUj5WfQrRK3hlarAbxTzUOk0KExlzGE0lVJ7hPcHa\nvcjZVYPwNSm0WJyxvPc0I/bKIrcq6jGcuz8WfMaDkGDZMibE53RkLE5QzApw\nyUpXB4/h9ldpKfNSXDXaVDszJdwF3OCuTXmlgbiIa33gtBDQ4Z8JN5w5+Zkk\nl2D6Y1/sczxzn/ki8hBk/1v/sq6yB6i9+wY2M/aYfxLHCza46opAEEmtphFm\nZtOERhbL0LhS3LbsMNKaV1BfrWz22OtM4cg083Z+xhbnsUh35mQoAGyIHSt+\nT/2qIn+/BG7dGa+sGlKWpb8GCIj6kSV8rRd5SxeECEyJCHKOW1vRbOhQ9DCy\n7DFBvV3bHqs4h+kWZU9O2O9T5Xy5rZhPFBm/cMVNi5Y7pk9r0EqZBPF/HqKf\n2a12aOfpLINaQTHlR2BmwsVvXHnDdHNLX33ZCHODGhrQg3nJR4XP18zVX563\nH4IXNVqKSXgTSkxxIQJ9c7NCN1kSuM8V2Glc8hGjDa365LdlgAl+dIff0g9T\nFUM4\r\n=OZKW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFB9+hIbSXy8EeKi13mw8NCKduZXBrFwiyhsx1xBjVIZAiEA3sFdKZf451+m38JpmBHLWgox7vdotCBTSruaaFJdcmc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.68c7fe5c.0_1627583548774_0.8464314722551287"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.aebe39e8.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.aebe39e8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.aebe39e8.0","@material/mwc-tab":"0.23.0-canary.aebe39e8.0","@material/mwc-tab-scroller":"0.23.0-canary.aebe39e8.0","@material/tab":"=13.0.0-canary.ae85f7eba.0","@material/tab-bar":"=13.0.0-canary.ae85f7eba.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d28ef9fbd1251f2664f6385efd6cd33d59bd5a19","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d28ef9fbd1251f2664f6385efd6cd33d59bd5a19/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.aebe39e8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jwREBtUpMMlxXrrzEFwt4PtBobtyxRzySHio+63pTl50/5J6mgooAKlQp13HK0g8H5cEQgAWdHLBWrlAg1j4Gg==","shasum":"4246984e5d09f64d1b4de2933ad052c88414e407","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.aebe39e8.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE+UCRA9TVsSAnZWagAAJdEP/jt5mtnbzY1Y/zSMwZKz\nNZ3WsKgdM91WympC2DkZX2IRgbRKuJV2ym9BSN+bN9eETl9IuK3Vo15DF2Ru\nsFpC3F/rHlK2MV3XXFcBDvRuw3Fxs6OwtMFhp7/UoPFqQhCfZCo/sK0mtg/f\n3m+4qHO98f8M24QO7uHaLvdtyVe3jKMdT44LO1G5UM3tclxZRYQRinnm0n7/\nYeA8Ygb2T8SQxIu5NA4jtuNj4cNY7IaHkJf3yPFb3GmPsgkRDfOXB5xIILfZ\nx6BEMpq9yavIcMzc/xM9Is0bhmasMhE4LHjLfwbsS8UqsYY6EwM+zjA4u4jz\nTp/n5Y/VcjTQfUeS219XGzea9vSX6xdoDI5etoZkNg4zks03MikyVIHSA8wh\nOYxbaQW0XFxjRqsYCin9xepf7t3UZIEcTd9q08xSLovyHlONsqDmgyiie7hZ\n0jCXaS59IxDmxKWjwrMZMk8Py1rHF065W9TfT1CcCrMh9ZiRzrEU3KZaAXQb\nD7vVR9bNXgHmm0EOHpBJKJ/tbOTrCMYTSnB/g5Jrx428mdNbf6W8/CT2qxsI\n0+IoSdbOyaSiNPMbrjK+LMHMwFd3T817R9U/8QnpFMrj0g3Pm5YGQOcO+n+s\njoqMZ9VHGUeCS0kAt+vXleSRlWBL0gqubMnYFCdQ2/BptZ7+2kICNTetTMxM\ng7b5\r\n=Kvom\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhScxH8/ekUqOEkTyZbksjlkrBFP1YJdLNPKRTjCgAIQIgTiFF4Lk+pjE5I/7gx/fk9Cy4KCl1BgJ9H69Ksjl8oDw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.aebe39e8.0_1627672468318_0.8920746233012484"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ea889c69.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.ea889c69.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ea889c69.0","@material/mwc-tab":"0.23.0-canary.ea889c69.0","@material/mwc-tab-scroller":"0.23.0-canary.ea889c69.0","@material/tab":"=13.0.0-canary.cc5377458.0","@material/tab-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"29d32f8e88155014cd9963c5b4fa346d8e3d28d1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/29d32f8e88155014cd9963c5b4fa346d8e3d28d1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.ea889c69.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-46HO6ycUUODjHnfSPCLxug4KqH6KD2zqa4PdKut9paggeIo4TUn8DNPYn1wtpJUqk1mEok6kBXy1LhHTT64JSg==","shasum":"177e2130efc2b841ff0018a157af84dd5a3545c7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.ea889c69.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCY92CRA9TVsSAnZWagAAwV0P/3muf4IbqRWI4hYXPF/2\nu35TBDYwrw3D3NSmlqb8TU1X1CVjtMe5W+JLbCoutnjtG0ZoxCWtqTGBiJwN\nzHa9xlHO3fIVcbUum8Fb3Z0KBluirH8iYQcmo86/0lu7k071d9X3YhJ2HYPr\nynWb59yBj4HvMjKekM46DVoRcM4FOer5ob/os9W7pzgR3tySUkP6H/zINssK\nKX5I24PcW8Jvx0xWt+5e6oWb2szh+k4KZzqw7UcEDD/+ulLLMysmFOqrA8lt\n38in7oe0LExrO+kr89clIRVHuTLNPBiBzygSMSMyPjyQokASvCcY9+3WzWEt\ntyxH779RJEaqyH8SDnZpAtHRnK5Z6w3q2juKLtWbdRM/f0SXr8+vdxYxWam3\n2bOKcuMS+VAZMnj+8pX7mbQdrQXQUIGEOXiPvOqUDzR7PXaVn0s8zZW4LD/r\nH9obBycJBmAYrExdshbVliENS192Y4kkcQq2b2f2yGHbm/7HufNcH2FuCcUx\nDuz+1fVVLPKpHrgMrofaDA1HaAjmdh4Gt4dBcv1kelBJsRamX/dt9pSBwVTA\nRyRYm40h/RRfsSKfo4jUvsw0umxtfkJ9bwgb966Hg8wLe9iVUCF9zICSjS43\nXlNJg9IBPLPp/wCBOYk1s/0WUBEGWzsHmGPj492TKwQkdChaPHz2+5LcKIy/\nea3z\r\n=Yj5G\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHfnDNa0LhosvgcYJYU9ii0Hgo2/8anIHjna0JdBBn6fAiBAaFpm9Dw15bnUFjdScUie+Y5MNp/S35pxxAd3D92Cxg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.ea889c69.0_1628016502244_0.584235343194315"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.21918905.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.21918905.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.21918905.0","@material/mwc-tab":"0.23.0-canary.21918905.0","@material/mwc-tab-scroller":"0.23.0-canary.21918905.0","@material/tab":"=13.0.0-canary.cc5377458.0","@material/tab-bar":"=13.0.0-canary.cc5377458.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b4df0dc9ece9df56af685bbc48963988f2cb45f8","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b4df0dc9ece9df56af685bbc48963988f2cb45f8/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.21918905.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-YCMA4Al/YndJkVSkhyEwFW7d0cW2GXv1iO1PvmoHWe7NKJvmAc2DF2QdbcgWkYxt8yS5WRzbtAX+fhZ0J11CyA==","shasum":"1d21604a58af7b4b2a5d4d190f5b6b2d97ec838f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.21918905.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbHdCRA9TVsSAnZWagAADrcP/0LqMrHiHIo1X2eE9YmQ\ncQ8tRT7j58esaw9uKW+FOJAebHgmFsSO6EwEBTURdBJhzlf9OL4I3F85Oqv2\neS+CHZ3/pVFygmEc5ShJW2L5SOm3D4/GYkCNn89Rc5nm7SYPWxLQvclf/2jJ\n+PY64LWp7TMop0Ivey0UwcDCZXpUeNMQ99WpfEwB71YTf+tKOeSoB933DOnY\nk8UohgpKZZaU4+/nDD4zvidc4sh5Jv2PgTdy1Bp+YVk/Apwwo+oaugr6YVIX\nDa95Be6iU8ZQIqRa6nrCxdu40T1g6PlLhQqWlID/a5nUeuI/WH3XnyOXJ5Uj\npjj8A9fXmrOYpvx4Y7pHOv5DoE5ch+AhWbeq34HuEpTxvoRB5VQusZ+1SB04\nZzk4aigj9C2iwmkQfCyFioO1CnxX5lr9OdSry68EboOO8jLLMIC1yqheOzT8\nCE28ufmjrce8WgrqAvXWlSDVaje2qsT16CW05g1aawNgPzP4tkgKhJTo4lIz\npFu7DYx4EsryZGVjHUltS+buc4a4HAZ/Jye+FLn74W3HpnIf1MKpMIjuhFVH\nyuNU7K2TnCtODeOhz1LdfmW3PQKiSZ7cKjLb6c/q5o9HWaMBKddqDiAd7of2\nlJ8zyUncSNrhbSmLqPe3rRp1ET6Adhg2Csddlz3HoSfMes2+pdPGlVbMZ0h4\n6gog\r\n=nPa2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6LkCoD50/07BLZ7MYKw2h+w7OGHH2cMsiwuEcoF+1VAiEA5aR+lwgphwIBU7KOYpso//KoVTMNU4Ceel2z9hzvKIc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.21918905.0_1628025309298_0.31042544476920564"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.193c87be.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.193c87be.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.193c87be.0","@material/mwc-tab":"0.23.0-canary.193c87be.0","@material/mwc-tab-scroller":"0.23.0-canary.193c87be.0","@material/tab":"=13.0.0-canary.7c96e6b98.0","@material/tab-bar":"=13.0.0-canary.7c96e6b98.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/62c9e4344bd3aa4983c1eeddc83cc2dbe9ec6644/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.193c87be.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-7wWXsE8pm5lDzx4obOx/tGMF3QFjdZrdF4fieAjFu4DzocC7NQocMmF32JIlC7c5QCH3RyFXBASr82PKDqhZNA==","shasum":"173e4ae0f8257858def2909959fea2bf1ac28e92","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.193c87be.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCteTCRA9TVsSAnZWagAAJNwQAJRSAeXDctHn4tOjpCAh\n8fwJXn46XmaPQpszirjaiGolAblnU27VgF1ldt0Y5tj2WY6QIznGOL0BXg8K\n20EnHHv9QEeX0Df0OsMFSfZK+YBUT1YGZ0UkGU4ie/vGcI2Y7STdImrVAF16\nRyQNxOP4oYeq0tnQvbU4jtmI6sHjPS//9AffzRgMykxUV/RwBwo3xHLwRtvS\nF3O79vJIaY27IfJnNTZ28n1LxsnJ59pT1ebSheDRc5dnjWTslTNi0DF/9L5t\nSe1pjG73pKbmKeXWFjOOF/OCTu2J7tGZU56CM2JwmBvJXRQDUB2hnBTrDyoo\nMFBGeafzgAWV+6EEm3jS9JvmHGAqld/yNTc2u/IqlsotSdTikItj1tJVzVrN\nJtZlaNriUpW1mXIKUZSSorS7utr318+Q5j1geBNw7k53aLY4DiDxRmtsP4cB\nn4LVCdTItwVQRwTxoXB81qosUlmr4Fe3A8D5HBlKJoOVTz+wRnoRq37t0bdf\nqrGljyHYHrqsdElNknIgigm1rjIhYzNxfQBqYCx5MPQVnVc0dESTYGhfs9xS\nRgtb1y91YmnzL+wdfC8qL/vpz3RpIeRL7bkAOUNv8X0GGYds5NMGkstNDymQ\nMYzxNl4GmNcy+ziPemk7yjbi3jSSJnVyBQdxCPPnuHKkXv9GVWO8nt3cBX5P\n1F10\r\n=ETC2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHK0moPcyEFzncGk/oKTKlDjPTBL4jsAJMT2r0+j6xHQAiBJ3dsbpK9XV6spPjkHBlulx2FKESrt7eRiIeL7/sO6JQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.193c87be.0_1628100499556_0.0014994426583263554"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6fc52d8b.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.6fc52d8b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6fc52d8b.0","@material/mwc-tab":"0.23.0-canary.6fc52d8b.0","@material/mwc-tab-scroller":"0.23.0-canary.6fc52d8b.0","@material/tab":"=13.0.0-canary.3dd611091.0","@material/tab-bar":"=13.0.0-canary.3dd611091.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d70f6897dfb89d87fb73b1e96c8b4164ca76734a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d70f6897dfb89d87fb73b1e96c8b4164ca76734a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.6fc52d8b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hmLbQM9c8i6qixogs+OxzFplJbZpq2m8uffP4Nz55tCoo2BTQ1BdvzgH/8ucfHtXJMrVqYxDLxsNih4Gv2FcPw==","shasum":"3c785b9d7e09cc41475f43ca791025113f6643a7","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.6fc52d8b.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCnVCRA9TVsSAnZWagAAVHsP/31spbfudawuD5b/CoeO\nNqvryt8bHcpvfPbsjAIkFtG+yVLXc1wRAJ6prFz3mctHz2nj4nNABXNMlfwp\nNfR4S/qGNyyiTZnmU1tqrO7PontavLOWqIHw5szqUT1jqjU4aSnlTAC0I5O2\nVCLzwIOqAl8lYeFUvW5pjKT8ZT/S8oIEw/unyGQKIZsB6Q+UbtHVjhhw/NYt\no8hdInkvCANAYhSybniH/EdpWlmVHenGpJ6KjXcPnDbcXMg4HBed4VjC+Qt9\nvCYuRdfTqELKhddRgSxBHH+g5n65XUQgFB9IUW3ugyByiRo9C2diG3q7Zims\nWE10bUZcYxLBo800kOGjdxPRUAs+fJG9yKLrSo9PqT4lzyfnZrom6iGm2PF/\ntjXxn7Mdd+J/64S55yvMB9tWTscfQpq1k/f+VdPuUOWNcWWaHTdh9S+Rx2e3\nXxwbrz0EiW8dXmSez0UE4rAIExqa0yjQJPK0Wcx8fFFlR0XG9L0L8X49rlLy\nP8WnKEL3AOp4JJze7fWaSAB9Hwpq1NNgVUCmSHONnbmtMYPXRvHddYfzt2+M\nusfaQbkayelOBlVeY5JlWD4uIRtKuHNOUtVjwgRz5FZyMqSlIeW8LYYVdP9M\nQYv19kzMRbVWwr+6V2jaV4eZJiQ5ERMoQXfMIxMRpcGFbxGSR6yjRVb7aG5n\nR5tO\r\n=zD4e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZvE2SoSprzkuqYQyjOEFhzdprLC8C9DpJxftpFtijOAiBljh8YPDced7rPLfMBe7YOlBkb+3pqqCVVawaTyFY8rw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.6fc52d8b.0_1628187092866_0.36774269867065"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.e2e9777d.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.e2e9777d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.e2e9777d.0","@material/mwc-tab":"0.23.0-canary.e2e9777d.0","@material/mwc-tab-scroller":"0.23.0-canary.e2e9777d.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","@material/tab-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdfa31e7045c5004a0ebd645c1096ddc7724ba28","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdfa31e7045c5004a0ebd645c1096ddc7724ba28/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.e2e9777d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QxrDjXAJ1xnY6kXWnE4DZFnqQHBXtLs2idVo9yzVo/7vZDwOPwE+yEH2jMSyaZeXS2iB2qBF/7p7E/1NMKvYIw==","shasum":"39953660e26c66ba371137291fbf53eacc81ab31","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.e2e9777d.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDGqoCRA9TVsSAnZWagAAQGEP/1iqdrj17zqAl5xXM1VX\nEtNWxihJU1OrJIzE17+x+UPYbjaa1rTiCuuev1q0N5t1cBW9Urg66QaEjBcT\nLXSIfr438HiCzejGgr9rRHyLr6aCFWAdP+8Qd9JggACtJoTxfLc3aGwpIbfA\nQmU3RO+fv2eHa3MkPnKzsdD9+gumN23WVlotz096hzsCVmlQnO4lxjHPuyFW\nhQd81Pqyixuykk/51nLmD88kkS6Jn5P6V6JQLqmyKkiS5r4+V5pMRkBQMMhQ\nVDtfvgUQWmQ+/hu97App8IVdFx4yvr4ZNjbNUIIqyTnk/P3MxSBomseKhTHq\nz9/YUlZOJLcSWoQiDgS9ksIAKSVigeRohcUW+4n46DsFUcBUxjN20Cc0UeSZ\nqF+/OL8LiWmA1vNYQBpIMp60r100Zzv9Bnkf1Tvf0FMz9JD3ms74nmvUXI79\noxnFvaEEcMrKv4hyCQ5bNPK+g0LLeo95alGuC4vToCz1QXtWD42AIcU3YfFP\nTqtorpp2/Q747GrJQ7uR/dObvZQftr6apXVTOVYwB0IAkChAh0T33LOd8klg\nj/+fFropu9y7WOLpazeXjQ1wSQT56J+1qcFH+/pwKbJdJpukbnfms4JmEzeW\nny3QeQTjYMPdh9cM0PHwO7jz+QjAiMg6A3vxmTJ1x+3AUDNFOe70fiF+9seQ\nzGzH\r\n=Gc0U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHAkXTOqHZ9hJ2LgRzMxrRlNbjF7B9xBwRmy6QjfKD1CAiEAj5YmYrnWEjzZZN6wfCfXMQXGJaowaCsHSJep2rhJkys="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.e2e9777d.0_1628203688719_0.9508986592684632"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.72ff1e68.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.72ff1e68.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.72ff1e68.0","@material/mwc-tab":"0.23.0-canary.72ff1e68.0","@material/mwc-tab-scroller":"0.23.0-canary.72ff1e68.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","@material/tab-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"efaa4c0f4dc1cfea004a7f4dca613ec666b1106a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efaa4c0f4dc1cfea004a7f4dca613ec666b1106a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.72ff1e68.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-495nxdvot6p838COWr08lNTwsBAlP9isI13PnErxgVkn32QPBXuFwy5mOV5D7x43xJKzs3hxkawsxeENWkGPag==","shasum":"cc7b7b711d0345263f86232db4bc5a1b01f386fe","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.72ff1e68.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaBaCRA9TVsSAnZWagAA8QIP/i3V/qX2jTg34GqpiU0i\n6fiQAMWCdORfk5HuX6uAUZKmW3Z2qMkmtF3Y+mItu/QN3jVP/GQ/mNfCSVkL\nIl36iLySwi+PFJzniRSCWyIiHIpfYSOSgibqHeNDL0FbK2UR37Uhq39XzpH7\nq5R6i+QrhIXsd+3FGpkrRL3PtLWMup05luXV6kQz0umR9u4VYnGUCWoNJDgT\nJ6JEs4tgslLx5VxJZIgp33AXZat87pHLVpjIRWsEgH4XFlTWpN9TAfqfUPls\nsSBQmdvuhfeA6g7vgX5QDgKvpo0LpRTbvqD32qdEvok9WC66FXWFg8oHRX4u\nWOV2gTKTt+vAFpGyaiAr2cgwE9l5xPItmOWxdw95fCETVu/ghhHpB7IqJamO\nT5nWQmz4MBBFt0SklARx3Yy5ooaxXWzY8yzlhZBNTIUHgKg5MXIVeLyBWx8Z\neV+/NVlL9omdnouOLGZxI8CBcnnZnprZEWLS3NllxjUr9ZO86TJcZJhpvjZq\n1ezKM9UacYBXC3lWJkIsOp9KpwNg6oc3ccbOWoqnOxh/KBWmlMq/xIcsD3mh\n/GrgoAsFPGCyWIsvUfGjWiqnbSBFrg/0RWLbPQ5jdbplAORCAyksG/dN8raw\nTl0hGgwCzb8I+XQ4Ln5QdIq5RkIfjj5WStCGaS5VP2Gv4PmtNe2fcWQorZh9\nQZZQ\r\n=LEw9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuOlZ2TTjmfGsjw/c6JDuDQH9HHWuAqwIZ0T3TnQhFnAIhAKA6UgCcmO9BFpUk8CQa/kvU58qDyocfkrV3qCo/mYlC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.72ff1e68.0_1628282970216_0.6996160557464635"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c527e93b.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.c527e93b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c527e93b.0","@material/mwc-tab":"0.23.0-canary.c527e93b.0","@material/mwc-tab-scroller":"0.23.0-canary.c527e93b.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","@material/tab-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5f7d2f863731a86414f3b6d188833c46053b72c5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5f7d2f863731a86414f3b6d188833c46053b72c5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.c527e93b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-h6ZVO/EgHuzr6KljXV58b+NXLrJC2iU4KpN2trcW5uiT/x0OEsuSArimasCviUiiY+i276+qPm0hDYjXSoYS1w==","shasum":"5323d91735321d26866f78ea175a79fd80bdc50b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.c527e93b.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDaVuCRA9TVsSAnZWagAAczIP/0lQMQOGOimp+zjXMqBH\nURT5l+jLGTN+KLWkgysOEhKa5vM6kdn+TN40rTFlsiTA8dxD8F9SOrqfkH12\nN7w/2Z5J9L0rrpSXadzU3G8NVAMTcq3lFCZkq/56uzUPmUILzZHGXjmltsKW\nsoTiynXuVVcZQhKZgzWsqdgASQYHtFgOZFSCRKOi3LmZSpBqAPqtfkb/UZ6l\nPcniyVYTY8E0aQ2fDjbIFxRgDA+OPQEms8X2zmZ1b2bMOXnwhqBt4ZdQt1Ot\nqkZslAUHnHXhvDx/qNtqMkOETe6JsuH35nXP3pOVxyX+Phtaflsx52wpx5CK\nsYJ05o2rvoXkdE0tl7vBhZ7ZjqmrNuKW9iMQYd8MjjQfmoN3lhOpT/jViIo7\nSqWFQe1YX4qnWDfS9cuDmH1QCH3rj0HcP4rpiukU9rj4H6QiHzrOdWJFpYdj\n4Bn2Of6VvTmC4ifp9cX/T+3VLmRPclHeCgue6Ft2Zr+UTaCN95qOSjq1RTfp\nexPrdiji1II/Q0skyjADUSTkXLFqCYIyNFCTk3yKfXDUJT1R5764VkhIoBye\nxLHy2jsp9NX439G2U4qG3rLTQRQQIMfnD0e3tuyapZd35wo7p4caF8Eytq5r\nOeFAbS3a8WT4YoLZ5b3zoAqdibgdyHXg1rwNzZRY7FS4Y9U4v3hQ81A2ugp2\nlDue\r\n=aQ8a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCJFmOyGI7ZKfhBugvcXITIt9tZRS6EnOlkpjlZZmeWmgIgGjjlbgEFx1myyRlbYXSgJdBgJSSP4d1lmvzFCMD+Gxw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.c527e93b.0_1628284270081_0.1154698976753128"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78b1eaac.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.78b1eaac.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78b1eaac.0","@material/mwc-tab":"0.23.0-canary.78b1eaac.0","@material/mwc-tab-scroller":"0.23.0-canary.78b1eaac.0","@material/tab":"=13.0.0-canary.b47dd37a6.0","@material/tab-bar":"=13.0.0-canary.b47dd37a6.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6052db26d383ccd469e4c4f6cca3c1d2e4533696","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6052db26d383ccd469e4c4f6cca3c1d2e4533696/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.78b1eaac.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MdNRnuoOR7SHBoTd7BaVV+0z9NNlfgnUHnIB1mS2pnd4PuhMrf8/srnVXsxehDS/7GMBblR8DEWupjpShfurMw==","shasum":"57a4faa0062822b66d4a2c8390690ae6ce28c4b3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.78b1eaac.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEW4vCRA9TVsSAnZWagAA4wcP/3l3f0U9Nhtg9h1y9Bu3\nHeKrtJeGEAdbVsTLwGI0nCwp7iJ5Q9Y4oZj8NvKQsO3QYKTPsBLBNXb0omt1\noGE+5Nc3wMCmi6dkiBLIDnyuuGda3ZFk0Eh6J71ModZ1Zjv17/t6eejj06cW\nDycxysMEJEc1MtolbvBZCto4HiBnVf7b6vTHe4caVHsIOcIEV4GzvkZihPCP\nl1DCRLhWDvtIevNOMAUgttlu6QZ/urjqW5KV+jk7mM/P+c02tXsBZDM+fc9e\nESJDFeKhx36WJ2k0/p3SVlwx3LoAxYfuxhvcdJt23NnZde+ZMalz5B/y97Ur\nKBQG6HIYIvKINzG5JaS4nTQTOdxLV6tjUORU7VCNlIFxCiMflIv6nZweEeN1\nVNMF5E8SP+XQEmLyrajUqrWFDEN7WGyVuBEcYWEM4/KxaNQSzHvhNq7Uq333\nyO7shdDd9p7B96I3AIwICfm2fc9lUPTJXlbijd4Tea90fqRd3jTRWlbmYuHL\nm4C2No++LQURJzqgTS4shtWMqbkUXUYiVcHkdmgE252sl6S/kbeTGtI38H0D\nRhSfVZXrXQfjNhkgWo4SRlZHk8inAcQEt1PmVnO2XR8UDLZr6YMSwP4D3PYE\nB4QFv5f4BETDwhZ0ySOh6GcUQfUXBzKbasF+z1EiNRtjPKMcRyvaFV2iMTe9\nQxin\r\n=g5kB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIApPUMCdfG/Bo/sxahYx50EBcmcVcuxiqs4YutV62HpBAiEAhq5MgiRVJFj/Lg8+zjc3J7eGPvers2TfbIwp/4TtkTg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.78b1eaac.0_1628532271530_0.5545979500190086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8a4ddc9.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.a8a4ddc9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8a4ddc9.0","@material/mwc-tab":"0.23.0-canary.a8a4ddc9.0","@material/mwc-tab-scroller":"0.23.0-canary.a8a4ddc9.0","@material/tab":"=13.0.0-canary.7249a3060.0","@material/tab-bar":"=13.0.0-canary.7249a3060.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d9658c00d9d10361ed16fd976b03d6652cda9ef6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d9658c00d9d10361ed16fd976b03d6652cda9ef6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.a8a4ddc9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eXXJwH0n5ZySqPzxgpXUiiaHhuXlXIzaqbUKybWyUpwtz4ySDRwc47Fh+e7xC82dki+0QFrl7qc10g1oE6awiw==","shasum":"e082637ae3c2d075d51779d3f273142515bb0eb6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.a8a4ddc9.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEsnKCRA9TVsSAnZWagAAZSIQAIPEXEnEdSzePIdWwSre\nzsXVa0uHOans044/kLuS0UOTw9EF+ziwhEztpEANGBBzLNXgvAHa3b4PhBae\n9aMlLfCEXq5obUwy+AMeuvncxTSVnIaXY3IY4kBIz6E3JmRI0YXP4QHKA5Wq\nF1hDGxqz5KK3mD9VAgtbejlPiefFIYZsPR5IpzK4RQRoiwp6haTzB5PHpMmL\nSFymGdlr2yOUmSjdXTktLlhPuL7YxUHrH8oh50CeoRfbe5jotEC7BOs9xNdA\nDYC+9QoO5PBAPvewD0KpctZpGMiKZMBkR3hL8whuUXwIK/h7RvVczjYYsq1l\nIndn9WLG0KcPUtlQVl7uVK9QLQWuoyqV5pURZjiITyEDK0/NdSr43f7nuLvG\nXC4t6uDA2EMuz3QxXr1rLXlYAz3YW3pBbXOXX7IkS/nWh8GpnaTCJk6To4P6\nGzmLS/5+izWN+hFXE9uyqaY4UUvxNamttIn7UqKYAAbPBd+SnqeGtUPTuQqC\nHF2aD0Fne9vC61/a4szdJBEV2r5HP81+nZzNWzgQuzz+MjvmLdvOg7tIJp/M\nI68ycgbV3m7WBmvgT5CCZ4+NB5vXfn8TtVQ8GpW2qf5ZO79Wdng9bQQRXgGJ\nCmPkA6WP8+H/I1awgyVUK9ULMRU6u/KTqkUukZVOWuCGZy3Y3nEG2vrjxBqx\n74Tv\r\n=mwiO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDX0gJe2LysApWY0zHNTbxP60D52mEve5JdanWCJa1dwAiEAgup83tpRWtpWaQDYyKbj+LtcSx8zY5o/NLvBUF+ZlB4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.a8a4ddc9.0_1628621257857_0.42510245954887305"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.99fc0632.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.99fc0632.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.99fc0632.0","@material/mwc-tab":"0.23.0-canary.99fc0632.0","@material/mwc-tab-scroller":"0.23.0-canary.99fc0632.0","@material/tab":"=13.0.0-canary.f4241a42a.0","@material/tab-bar":"=13.0.0-canary.f4241a42a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1182c7b11008cbaa2e6a052092cde8c856306942","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1182c7b11008cbaa2e6a052092cde8c856306942/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.99fc0632.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-wpkys3yls11i2CJD12Z6sp4F99Kp+w8aIpP85c0ev+HaeeiQsgvxcxyGutGP9TiHhv2MuFtnP6rSYkEf7ojN1Q==","shasum":"ba64251f8750a83f313791f87e30f45e91068e3f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.99fc0632.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFE2YCRA9TVsSAnZWagAAVc8P/2SfnSMu4v0LrTmpwgfL\n1OZIqhDzii4FP0MQBf3xQSt8CEjsdDe7Op0hRibAmFNGnkvsNjezeraA0tyK\nuHPq9i6kUUV+D2Wz+n3hI4C4IOuYZtfuaY0d3086JXw6gZCq/olw3lahPxY5\nCT+fkKF48q0KwLhR4yPC579qb++xozH5Jp51n5jUJAp3yR7xiscLUagHCR6Z\n958i2d0embo67ldwafmg2h1g99rVeevgwLc1lRUcXANr8UC5pZ0TFdmwlS1c\nRyzrhMAStZzLn1rnosCWOrweMDYMbOouV05s6Fqcki83HfmvMYFgfXRgEZIl\nmCDgwkaRr9Wd/byHYKKt2zK+z1miBJ66ez7tk0cHZ7dHGsQ+B/DEj2fG5/i3\n21GBmH4HmdbytwMUJDE3WXwLTHU+kWbeJ7afpiZDXK6TKu/YAeuoaYFvBGgI\nUZEzTs1YifClPtntwiIT7q8Ee5ihnAKanktp6v/oYi8RTgb4LSP0AmeCUEtH\nD4BgK4OMSV1gstlsIcZ0Ky58WsYivlbQXQIHdbNkJK+jgJyQmd1TWLzmg7Qr\n3yZaRshG5jI63gwHwRXL0Wsf9AEj3X50eGfwEZ1dHYG7QomRQTwYWq72W8+p\njnCDpTxbg3ml39eh3TwnEf6rZrBopqJxnsEJhHBTGkLICIYE88fPGZjStiTz\npMfi\r\n=KNVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHh7mTQ6BB5HzulUTuYe7WfbHCLl3dKdvIpyJui480BfAiEAsJ8DafMFcetKyVhEzIFtLHiZDcJNsFPFGIAxRDiLWTU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.99fc0632.0_1628720536411_0.27517136418269916"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3f47ae57.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.3f47ae57.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3f47ae57.0","@material/mwc-tab":"0.23.0-canary.3f47ae57.0","@material/mwc-tab-scroller":"0.23.0-canary.3f47ae57.0","@material/tab":"=13.0.0-canary.0ad12ed3c.0","@material/tab-bar":"=13.0.0-canary.0ad12ed3c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"edf4f3bc9066a2b36444c8a434994a5482e8b500","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/edf4f3bc9066a2b36444c8a434994a5482e8b500/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.3f47ae57.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-zprUwCrrbN4nF+VpCNgMHUGQCfF/OVz7eVdLO6hmkoLeuxDt2BX+Q1GwSq0EB57Olq6oz6NG+RksBlkZ4aVsTA==","shasum":"0485bbc7585a31822f685e992a4a8ef859519768","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.3f47ae57.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWHICRA9TVsSAnZWagAAvHsP/3vBO/8m1Aya5ZsRep1U\n/9LlIkk2OCtLjdqF8wpWKXjPNNwCh8CyGfuZ/xu0Y+KzFhdrBlNZNY0sTF0i\ngXGVmzembpDm8zA45guX3+F7lR4TtwYPmGiJbytBRb/tQlymknzloXgHbEyD\nSftcWWnXScspYSYfgwY8p8maYhdrXWqK24VEVzdriSYW74Phqh+UQrVojlk0\nGMprP2y2nwhQgDnQYsoFTPb48Y1NojNrUT26NUC2jpLUH9jW4ZqkUENKXUqG\n0S7Jf4skNeu8TDJb1QBPlvMgZz8Zbwmb3P2gPEzJ/4JpY2R4gWUrTgBzaDzW\nWjihSGE6nPOVoUPWrwFTLssovbjdmnVAIW5GoiyXmKoh2tcXshEFCKCIWR6b\nw9SuBDMPEEV05J2KouwAtKUSwnOffHTD9x5vJAyq/s6XttmEeypaYA4PLsej\nR51p7ngWeIdVNqFXhLj0sk0YKeuJteyEfsajg9bYHX42jOoaUPCZUCqRoEGQ\nl1FUbcGS6vBpfDeGEUvCWrtBO0EVBjYk8yPAki9yoUGhWV9aA2NyWFmiKaUL\nNuJwajv2tKa3H/yFM9SDWQrVl08EBuHXVFIKM+XzUNeVKUbE0mU5CRRBf01I\nA42pWxA0KTLo0zTrbFxg2zTT//gqjU+3luL6FBnWsaHkpPN9aUFPtfJKI4GD\n6Zoq\r\n=MyPe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEUVCKO2PP6U7MUrVhjYDJowHpGBE3mVMkeyex5JRVTjAiEA857kyaFTFYxnLpjAxPTv3NYH4ADk8o3+XpGtcRpqUQs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.3f47ae57.0_1628791240537_0.4295943920896754"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6b9bfc32.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.6b9bfc32.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6b9bfc32.0","@material/mwc-tab":"0.23.0-canary.6b9bfc32.0","@material/mwc-tab-scroller":"0.23.0-canary.6b9bfc32.0","@material/tab":"=13.0.0-canary.077dcfcfe.0","@material/tab-bar":"=13.0.0-canary.077dcfcfe.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2479bbd88c9e53b974ec7671345a52cd8ac0e907","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data sets, and other interactions.\n\n[Material Design Guidelines: tabs](https://material.io/components/tabs/)\n\n[Demo](https://material-components.github.io/material-components-web-components/demos/tabs/)\n\n## Installation\n\n```sh\nnpm install @material/mwc-tab-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2479bbd88c9e53b974ec7671345a52cd8ac0e907/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.6b9bfc32.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-T7yZD0VyC+9dsdWa/N+gAKNBnFCtgZ1IbwmSe9CilQVCi5X0B0iKM3LdivHScr0IL3ia54JybfTzoyDu126/Tw==","shasum":"44e6ad5b543010c3e1a0932b5ef3620a2995099a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.6b9bfc32.0.tgz","fileCount":15,"unpackedSize":43886,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWd1CRA9TVsSAnZWagAAo8MQAI2ySquyTJ/mazTQuHL1\nDDtadVnapC/jfKM+1EToichgjqc7pNePsoDI9WGGRp2WNS8mIxynqqyShoBs\nzXTwdWOMYRqY/3Wew656nlaHMtTzRGCwENBQ4gcWne7X1KQDeAo4DsLXLTZb\n135FZwVlAUZBdi03Gwub26NW6W+mBYaxNmZcYL+leUzR5HB4VNZXnNdh09is\n02lNsdTKOXz13KneGv8bVOugSg7cfMSub1MnI2stEEhLiTkhuIeKImAqtQ89\novknBYmtB8fCaxSHGaphIxE44ezaG3HIdUeEi3pBGgeAxz9c/1InM2rNy6Ua\nObGpVogIuvvmkQJqAehjhf8nUyeYNUfTK4wrVF4CW1eQJwS25hqqAAlT07yN\ncntNTkt9PNUzYREfco9lIg8gtfLOpCY29bOa2zSx6NFvCenaNRekcRauXiGJ\nYLPVtfD8WsywN1+IdR1Ep2ScTLuNvRVsM7fjl1gRYGbp1yxb2ZE/96Inpkrl\neN6kQZ0eJELtDcf5TFSKd5M+oXjh/YILUA0pTma/ckA88Z0ompPnK2U5jW3I\nkvnlJ5beaVL/sgBDwYmmh2+eV4hF3Ma9vxIul34PlrSR6KelsBQL9QSCg28V\ndNvMdCY2vTrYbvhK+pDj2ejbHw+80dkh7+Re62lwvTJekw2c6bjNAwWGsMqK\ndRaK\r\n=7a8Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCa31GVn6vHHs+zSoBN2u5QOi9GjF9NqedDZdkMMY/UUwIhAOeNmYPyIcXwdyQSAHiJiOGqgnyEmt5G/eBAluGC9mpL"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.6b9bfc32.0_1628792692879_0.9504044212026408"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c89ecc63.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.c89ecc63.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c89ecc63.0","@material/mwc-tab":"0.23.0-canary.c89ecc63.0","@material/mwc-tab-scroller":"0.23.0-canary.c89ecc63.0","@material/tab":"=13.0.0-canary.2fb068fb0.0","@material/tab-bar":"=13.0.0-canary.2fb068fb0.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"aaa5bd89f698007e7af19bbeeea7c1212b851c35","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/aaa5bd89f698007e7af19bbeeea7c1212b851c35/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.c89ecc63.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ZoMf5oRrhkgsH7+IUfxVWd7GZ4w5+5vhwa/ReKtvVDp/xrq5R+71mMReKb4nCj0r4bM6uxFXYsfa3wpe05ox8A==","shasum":"55d00a2a7ddbee616af8c40324acf97b7960769c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.c89ecc63.0.tgz","fileCount":15,"unpackedSize":43865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGp2zCRA9TVsSAnZWagAAm/IP/jYjpqfU0knXuCzH7W26\nhJeLdSa3eqUm8aX2bP50Elq12oDQCQAwB0pKmk9EVp6ofTljNfqd6ijRkKMW\n6gXsnWKXP+nhACBE89EgA7V81WysomNz9wyEtFEPVYaKPKKbE56tkj6rpYfD\nIy8kIEZKn+p9rYI+1jdzjhQ3Grjba7ql0XxuN+eWHtybMlxl8LJMEvgkxCaa\nlnmr4Bq46htIpum2/LgErvZI3q3BbPiSkVNfgRm+7N/R72k8NvKc2Svy5gfl\nW0fwDe8DS935ECelMIN8JJsV1pMCW9WH2A01Q+zG5TkEhnsjcC9lvixjtAq8\nOAjyFnomtDZcDmWPmy+GTt7Ovvu21aL1+y6TsI0a2s7jvS0CZm/q2zW4nVlN\n+LPA8/kztZxHw6y/8TQ8LZLCDW++lzmqjqhoCF2AIL44BeLz/XJG2+jxii0K\nAnvyrviwxL7oi/GSk7S2d147GVQs6EjkccBmAaGAfQghMEVHlVICPGWy+hRC\npJcXRWafVhlxd1Bapcm7h4+k6VJUjVheF+dtsvw/t+XPsIoz1HwQXVTHpx9w\ni6pcWQSXqHWNuqIW57rmmmFo9D5Hz8jpZg7X5wzxJGnoGkru4ncv/lW4sfhb\nXGABBUKyy1IeY85v/r23xsTAB+mip49hyWEdxlukk7sA3R/CCRTnp83xe3qr\nLcuG\r\n=JDqd\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH07fmAI0kLTZFxPICokQrKP9VcEwFnJzgbqQojuQorhAiA9FiBGKBLyF1OuY+sDxiqZY/CyduqFKJmNeak5AqsJbQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.c89ecc63.0_1629134258891_0.9288255488327342"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.59de86bd.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.59de86bd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.59de86bd.0","@material/mwc-tab":"0.23.0-canary.59de86bd.0","@material/mwc-tab-scroller":"0.23.0-canary.59de86bd.0","@material/tab":"=13.0.0-canary.457d89aad.0","@material/tab-bar":"=13.0.0-canary.457d89aad.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ac639cd83d2e2bff117ac2f85b2cd2641560a85a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ac639cd83d2e2bff117ac2f85b2cd2641560a85a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.59de86bd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kG9t8XTZ9d3wasfyehtiCzFergl7h9k1u5koBdKN+aCkNzVorHXULrgv+/BdwBDjhr+NoIpCtnZNMeZdhLzY2g==","shasum":"a604f148468fc5706bc6914d9912cb4390c131a6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.59de86bd.0.tgz","fileCount":15,"unpackedSize":43865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHGS6CRA9TVsSAnZWagAAMNsQAIf6ilRn+gh6FAQPF7zS\n3+vK/rJVWJdBUQ5d/FVpWe5KtUjB4Xyp1B4Z2Eey0iLX0TAnay/GxO2V5Fc+\nr6WrzvOjb0fGnG0+NdjEhzbizhNVvNTY3v5lNEUimicK/JQVCfVFtZEvVhc+\npuhXPhp6PM+vNO8Omjt0t4QRCBVJihny9SoPQhI+HmUaT0MC8Elq/YcXz7cE\nhSrQIR9qWMS8aQt7oIWcXezMdyVOLCzeRpBmH3zTQs4J468sPjelbHVI5rPK\neTgb0dPqTJ0YkEa1cdTqUjc15m9M0OUquY71iO5Kfp6R4wTBIfy/0BqIoH02\nKtWOZ4abdSuPqyXM3cwYcRuGR0xprdSexrQCV+LJe/glqk6o+Fo1M8wyPVO6\nEukSUVxIpHKNg1kkADKC7Jynh3BqPRj9jhXfTVAGtlqxJbAYtwXP1Zmh+vHv\nw216v+hd2qvP5ws4B8GOpYpIX59gX5zei1MYUT5uEfa9VHAVQuBwKcoOeDy6\n6dtTJ3wIVuaiJsPdNEgEJkPTH2bmoIjq2HUYfsL2RRqKjiXATssw1dG4y/pb\nx5fik/J7MCv7gg6oMGmA3tR3gPSrfje+dAbbXEqwYgjx45gObLTa17dszY+T\nBez/MUxRmSQPFLnbiu+Prfp7TDBMlBSIWzl4p1iMxVqXvoPgOwUkwstNgEvI\nwdXg\r\n=xwnz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuLBcMvc4guCCtoF+oV4L/77jcWLJ+RX2ygqS8SxFpIwIhAIQUwQqeWtSF6k+x3gB7ivTSuawcm3B6Tshyms9/nWtO"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.59de86bd.0_1629250746278_0.008349590695595488"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dcda879b.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.dcda879b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dcda879b.0","@material/mwc-tab":"0.23.0-canary.dcda879b.0","@material/mwc-tab-scroller":"0.23.0-canary.dcda879b.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","@material/tab-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ab309abf464fd85bb1f234aaf8a2ccd35b8e7635","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ab309abf464fd85bb1f234aaf8a2ccd35b8e7635/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-components-web-components/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.dcda879b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-hTErX81iT8DP4jOqy7FUAFqm5+MEoKrKYQR+iN8yvDU1/vveahNACamAJonUgnlf4HpxR9cyBSaotQnnNp8HuA==","shasum":"9cc73fac95a9e2719c2e25f151aa012ba3f35a03","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.dcda879b.0.tgz","fileCount":15,"unpackedSize":43865,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHYh8CRA9TVsSAnZWagAATnoP/iR/q6+780pYE4SBpqbT\nE0ivqy8L7YeATS+ZI2Ovs5JqJtcgpvyiOz/XLJuTkU+epSSBFLHICusU3gTi\nD4M7MB19SPP0Cdgkv7czskRaxIaEVLTin5NxYP1m70QyQ5neerAzpS6VR+7R\nQ2F7p1wulaSwNoaXJCjsAZnHIsE+vgKXBMJfq2gk294RAjTpuTjjCpuPZADB\nnQxC0uOfYShR3H3Llp82xQRIW4Gb5GIrv5aoZXA0k/5+08dzzbQMt+ckl7t2\nz7vVyaeaLd8rxCUwk7W1xNAe4HK6WLyHfyhl/O16T6UfFflcwesAAUjN9Wvi\nVMtD2JWFcRRmqjdLUOWyBQ/pTmIHZ+BoqN6WIW0ZUr+v31HcGdxFcX4FFfAs\nJWZ+FNchXIS1/ftQPlmzm47PaF0BKcYE4YbJ4bW9eHg9HW4LFSV5tTXWuyyN\nnxNVDNW+sueX6cmaA98zsZw3SwDjkqO4qjJsYW5HT+paxCDtsqpDqG1Q1sW/\nVhopnKlf0zjxHSbhnIdmMymNuKiTUfgvAutqnZCgCY1ks/PNYpb7CojkIfNp\nHEhCoIzCRH6XK73Iwg1gDPiiDdlfeVnOsnBKytyl3txpC0mIEVF1Mri738Y7\nqNW5N70bc5+ScZ6MACikxo1Vx2ICcgXHQGkloivo4zAw40Q3dgEzxKHwk4p0\nfQSs\r\n=usuv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVD2C0qGamsX/O9puTp0k5sRXM8X8j3GRG6FByIRw5RQIgH0i6HPE42cNUFCCz7s9pOptb//QyMWDSnl9kRjzwEcc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.dcda879b.0_1629325436441_0.9411576711127705"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dbb8b366.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.dbb8b366.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dbb8b366.0","@material/mwc-tab":"0.23.0-canary.dbb8b366.0","@material/mwc-tab-scroller":"0.23.0-canary.dbb8b366.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","@material/tab-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9def9b810923fb3cf5946b62d7be5df5ae926fe6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9def9b810923fb3cf5946b62d7be5df5ae926fe6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.dbb8b366.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5QJWjaqfbVZ0eIBBz2pZlqcNJP44a/OjtfcXsaNNxENbUpZVZiZRe1GFLuG/j0mQxK8JwnJfNp6iYFPvoCWhAw==","shasum":"5520dbd35ec4fc478c0723318503fb4cb8420ba5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.dbb8b366.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuKtCRA9TVsSAnZWagAAxZYP/0a+GfPyspZU4KHIV7UO\n30h2EUL2Nl+qckR8Xg4YQSK6cCKJrtwNEKtWEzQx10cfF4FU3qnKb4l7ixsB\nwT8pPhAEQ3DuWNtAEGzONZW68MeB0Dp7bL3Tm7BzJ715OoIzY+6+abGlPU4h\nO/Tqmk0ez9VreODuQoI143BYItLUGRZC/bvJcUyx6OsSzxkSegYccJACkADC\nbW46JvWQtia1OVcnP7CzlFukcpUGN3a0prmXKLzGccoVTWhSGbCXyqqdPDt+\n9VjebfkM63rtxZBJZeaeq8kUxggpJqzzlaRWEE2V8t7z5UShuu9VMMsgE/q6\nGGamY4gs2ZEzE5e/c8yZD33mmDt0DXRQhNUeyuXEfT2KD09tixoock3CPfyQ\nRl9WSUwTB39sPMmkeKogXAjAnDNI6WE5pPVyjeosC3y+UuTrpJZFsdLmZnrb\n8Os0p0MmIr83sJW7CNFCpA9WbVYuAOaCcXcvYGutXi9+qJ8xat8kfzRvxsIh\nkupWVc0wo1pzJX4FwSEdbUYMgO1H0FwX2B1ST7Mxvj3Pn4F8RQ1ENzVFZFFg\nYQ4STt4kWuIftXdCs5D8bhoGI+Lm0+PF2rlt7pxpKLVo3/VSxelxD0ERRjmB\na2eGsSSiWFw2tJv8cFWD3yLFeefSvdv81UGcH+Emcoxuyw3SuYDhOxY+V+oZ\n9qtv\r\n=ttR1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGmi85oSGlsOat/oi6ROIRa6NJF476cIE/60ih3HC6mqAiBr+wVcWaBCO8PgSdGl/bqjt0XkSu+n9YHxQi6PHNzOVg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.dbb8b366.0_1629414060893_0.6709970752909726"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.c6e3060c.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.c6e3060c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.c6e3060c.0","@material/mwc-tab":"0.23.0-canary.c6e3060c.0","@material/mwc-tab-scroller":"0.23.0-canary.c6e3060c.0","@material/tab":"=13.0.0-canary.43d2eed2a.0","@material/tab-bar":"=13.0.0-canary.43d2eed2a.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c417f32674c7318ccfdfa842a3a2cb3d57853b5","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c417f32674c7318ccfdfa842a3a2cb3d57853b5/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.c6e3060c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-o4aDGAJFxzigbfp2ufR12RxKYO4P/R00KMcF3UoSUgZBkgwq3iv2MHDhjZfvFw9NqtsLRx3+SFOFXxhLNEZ2GQ==","shasum":"eb8539af512ccce794678d00f6d23cfb96b2ce80","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.c6e3060c.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHuMbCRA9TVsSAnZWagAAzZkP/iHIGNY3G4pZUji3ly2P\nOmAyQaDi7z2OUDlhrZhQs4BAWDPOYE0PTkvmpRZKL5Gm9L24z4M88SOpf/99\n9rQfGqeFq1g9J0/kziDBO3t6cdGTuDN9vfe/pXoqfhGG2gH2pG+UFmPixi0L\n2nAj6qlaeWFYZsM3qGVPdZt60q0C1DlbjOb8t+y8yCLbj05TgJUjr535F1rk\nZww67J337B5T5RatKFbQXpq7DkhNWMzZQz251bQvKwYiLDVX6O/UgKV4Pdco\ngcpVzvKA1MHrpuyJFZ0YApAlCEEEgzlK7opfvbq3WEKqDeNLHusmZ61+OlwD\nFkvKyBgwzkaUtel5J+09W6wnK8BWKHtHte5FKCNYDIpiX9+vw+J3cMuIZUO4\n0F0t91ae89pUxcrp/L9BGq7qyEI+V52dZg+QFhkbdAX5DJ3r8zIpN7NtuxwK\ngf9aBPxEfaJnmLmYqMMrS3lt8v+cYIzt46Y75vKXIfISKbXJmsue3q6MaQAu\n2zVmJz0l//aZtD8XILrpeXO3RI6LmLRro+7SiXVCSXQKOkAPM2Q97KkjAFde\ny4qESHrrI1WiHryMGvDhhsgDmRNvIg1wGgecOJ+xaqx5Iy9DX7odXh1oqQzB\n4fGoJ/LkPrZhSVIVElh/wLD1c6bZGwhrPJZlrP+KrKh2vO11Y4nKE5stqAgh\nVMSo\r\n=gdUq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG5cRQuDfimOC9jFzse7STPTan0gUqYkD5bGHtHCLgnGAiAr9WD/l15Dw6BgquOEv0t6YxRF+dmC3cW/IGNIqSYvfQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.c6e3060c.0_1629414170926_0.6453289216840086"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.03120b7d.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.03120b7d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.03120b7d.0","@material/mwc-tab":"0.23.0-canary.03120b7d.0","@material/mwc-tab-scroller":"0.23.0-canary.03120b7d.0","@material/tab":"=13.0.0-canary.0a9069300.0","@material/tab-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ba0dc47ad891e00a21e2d69aec6ec4c6dc83e003/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.03120b7d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-FEB6PJ/N5/zL/uCHZ/r7M+rTp0cqdZhy9r8VroceJdmhfrOFX8FQy5CxwSgzZ2kN343m7FFijsXqm9fnnfZWAQ==","shasum":"c5b2c6c82864ff6bf5094d42246580335dc48d20","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.03120b7d.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHvcRCRA9TVsSAnZWagAAFZsP+QEL2dPnDxotKPZIF1No\nYw/Gbbw6El8ZcsQzwj/13UTDwNF4GwIqFjCVihliz8BiSNsdii8mfRcYSQJP\nY7L6dYuOxGXOyEU2s0spLoGj4NX8+4BNtq34t/QUBvwyLdV8RsmrVXKrx9ZC\nl9XoUvdBXqetG/0KUsZ2LyGnH5VcpKoYXcaQBD7anwPUoq1CSrAYE+DNhbya\nI1sjfxnxjsz2g8HM5MwNcg4CsnP/5BfcGjcIsyibRu4LMQrda6tkzUJqUGiM\nTM1TETyKkYyo/bbeM/HC1qi6GeQ/BKxJI9QqgrNJzeBCdDFa2potRBkGd7g4\nqDIOVGGQD6MySi5/7oOop3kTvcVrHeUZ2sceeWWVe9cMHlpZxoGOoB5GhD95\nLLE9IwCwiflXFmkglSlIR3VWXkH1s0JqCUa13EKuRycdPIgCxSEvAkAHbZeJ\nKvS4T2Hs6RFgtWfbbAOwkPR59dCNepDq7uGThJURcpVSGapnSXHq2hXlmH0L\n+5hGo/YMNix2tIvHCj/r6JPP+3mDP59oIirogCo6ZoBHMaSxzVHQh7NXGD9Z\n2WDKeTszTRwAkMV3DKU/vIhQZrjnov56OWXEMQQpCEuQUEPVIA9QWp+1aRQm\nc0EVM5Gl3J2h5CkDteD41G2eZKex8QB+0Ey4tq1RPwrGYo1oHpAKMiRsfCMc\n0P0Z\r\n=Ei/n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGODzRdFEDhI/FvBLeUphtNdRMMAR67QAqMLzU37ZX7VAiAYqjhHZgozXxk5CtZLVFfipVKkeW0J7Aws/ICYVx9Yug=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.03120b7d.0_1629419281350_0.7870561137545233"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d75a5f74.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.d75a5f74.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d75a5f74.0","@material/mwc-tab":"0.23.0-canary.d75a5f74.0","@material/mwc-tab-scroller":"0.23.0-canary.d75a5f74.0","@material/tab":"=13.0.0-canary.0a9069300.0","@material/tab-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ffbe861a3137fecad60074a6f36ca1061f940cf2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ffbe861a3137fecad60074a6f36ca1061f940cf2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.d75a5f74.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-A2gR/WGDnuu2Phb7EuJCt033OIJn0rKbzJHFb0ImVnCDQlPYdKPCQPizGTSggx2eOMGCyeJI0O6xnOdCfYd53g==","shasum":"22e3b6501027a3e7b4cac1ffbf9eef8ca612df93","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.d75a5f74.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH2BeCRA9TVsSAnZWagAA1d8QAIXQhlbNvNReIxhAUfiZ\nKq5v3IPP6pga0mxQ7uxgpFBSN/uuMegGf74vl413ZicOsqoFgC+vBdFS/h0U\nHEVNP9wcXzJW5LmvnONVVHQLJ4jlLz3r0FI6pd1EUecMNNkpUgPWvmvBTBHw\nDKTkzyQRIMC9umhgqNiCK2RNC5J1IKv+Zg3AlDFQzrLNpAChaz/D7lGhYFmL\nbvkLLvS6eylTmcni3dz+pWndlBGyKfw+6lB2qTTcdsDuJDA3dy2Rv2dpE0pU\n9nW+p3SLDAWFGQ8xZIAyWByJYQ9GOyv6sp5rhZVvthySfHnIHc+Z4z7APMfK\nZ/2k+BM2It0pz6K6g8TAQNcOOwWGMJHSMliVQ+IYT0r5c9j3rOlxxz6Z2FrM\niur4801UUXTkLxe2Dy+A4QOMuzFYIuwbcUi88mzq1zzDoQhbkZtbD2cJKKpO\nxnhXu6KBa1JFHjfFyCu3HlsIUWxB7xn+RM02olNjns3/dK+ltDi/5NoJbcTB\nUR/w51+GZQ3lvEYpWd8J9EYv7Kx6o1FDb0gsr76HMaxYkItGxMnKcm2PvApp\nEUGdJe5haXHy2XnvG7ljgDnDlm5IC9i234XBq+oYBP3fgFFcRt1WXhsNu1h6\nJ4BAIEBhbE1z1nDlotRwZWfqneQwJSB5HrgIJ1iwAkk/SbxEqescqJF/eGwe\nLNj+\r\n=J0BF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFAzzJkGpagi3OYdBa3dAKEgLXkSFBQ8FPrhnD2PtwuAiB+J3XMXL7DdwJ5i4VgBCK4o1eTvLCOcb3YHvAtsgj9XA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.d75a5f74.0_1629446238152_0.14829121709696524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3d79ffe7.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.3d79ffe7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3d79ffe7.0","@material/mwc-tab":"0.23.0-canary.3d79ffe7.0","@material/mwc-tab-scroller":"0.23.0-canary.3d79ffe7.0","@material/tab":"=13.0.0-canary.0a9069300.0","@material/tab-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4d51b5574d0d1d8166f9358a39a5d3f2b4c728db","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4d51b5574d0d1d8166f9358a39a5d3f2b4c728db/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.3d79ffe7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3wUvJxZbo7GbtyOrIO10IhCRJt5pxYx+rfzFdbJ5au/yPBTHstDo9yKtGWYcg2ge2lDstycQ5eh3hYTUEGuaoQ==","shasum":"77df6f4812f8061f8f0cca2e3af8dcfab76b3726","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.3d79ffe7.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+TACRA9TVsSAnZWagAAJEoP/1dzHzQbnSqJubrVkaq9\nXjbzkbWcR7Y8WNnd+uRkRr90MSDfUhDZg9jnwl0INcJNNTVGPFzSp8tWrJGQ\nylOgnslmDse5Jr9lT5yZn43l8yvXnOviJjLrr6OPCelA1aj9Am0XtHWEw6oZ\nIOGzwzhjo/G/t+I8+m+msLueREMEQgvcc1Q67iTmCY8AD1O/d0akD/N+PT+0\n04y0NhlOl1cZ12GvRPJEhGNOeAJiSk+QMdmQXzfgLSP2N6ke9IJ4nDX0rFwq\na3wDWr2aRCxpGR6OROxQ0dwDKPWZoL/9ymSUmS1iICZZNPBLTkaXSNdeJ30g\n8H8eoxmYEUEIIRlyK78bD+X/TCDbJby+GTEfzXGnvTvV9JFhGDhSri+0wSvc\n8dhhJwvgiCjtk8jlfLaT1lt4plAVwPto//7RxJcs2Hh3GfrVengWxh6oYVTO\nbbpuc8dsZqgHQOU5/AMU4MK4mDyQYOGaPcDJoiMQISxowLbI+b1y052Iwgh3\nRyUdOGRUAg3Sh/NxJz4wzvAao1AjSz5dYFNLYzQZA+uJ90YGcpguhfWDrp0Q\nvvvkSI+jG8tlrTUC3mbg+5LDG1gnJoMlwgXViyQ2xntsKCNiypp+AxTnuxOY\nG4h2fAreGfraBrQllLMFuIKcEI5zxYe24NNVzPjYOPifa9YU8NHEYwwdQWS4\ngXjI\r\n=VMGs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHFNQqpwaZ6rVTuuu2U3F/dJlH5dYgf46AC5KVZpwOYiAiBLZI8FsAYgLRzNHs5IAvKPhbhvV9Mfz3leSRA0DnPWew=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.3d79ffe7.0_1629480128426_0.8094296485577623"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.02213ebe.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.02213ebe.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.02213ebe.0","@material/mwc-tab":"0.23.0-canary.02213ebe.0","@material/mwc-tab-scroller":"0.23.0-canary.02213ebe.0","@material/tab":"=13.0.0-canary.0a9069300.0","@material/tab-bar":"=13.0.0-canary.0a9069300.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fb5a30909287b897d793fe4c7cfca2cc93cae697","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fb5a30909287b897d793fe4c7cfca2cc93cae697/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.02213ebe.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-19wMZZPkTLIud+DfgCsUsbElRMsX/72w5G08POLto/Lydjq6tvHBOBeKs8U1q0pz0M81KuxzXueUZ3mxP5AP2w==","shasum":"e524f6792a6f00ef771347e65d85e44cf4fd7384","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.02213ebe.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH+XeCRA9TVsSAnZWagAADHkP/jyJ32Gpcvv7k0wnZkBU\nvnQFVpJHnF04SEl0nQPsZXj/JDAl5Vi2ICeihDdvDNtwUmrEWII8siB0BYYV\nkw45Dw710JsXymNp1YaAEd9pgJd609S5H5EoXNC2yrj4nmzLZP1/gqIOI0/b\nV/z838k/NKbnflAnbuKRmfb1iQAkAxy/93IyzSVRtZmCNwAn/fh7YDvIALGA\nRl+4KC1Ziq363yTz4vo0n44oFUllkfYnmkTDeVedRljYIAhLoyMGWJ/bonaB\nWzV9pVpKgseK5niRvzGcBYWc9MXYm3a4sMxK6GmdTgPaHvAWS7VgsSI/kcb/\nVw6fMcGH/8RSVxvPtiGId0v1jBxT1QqfmwbXcqNfYt2/M1n7hOqOSRNWTiYG\nzpbuKogW/8LA0CJQippyRgNCVB0OkHUfV/d2jYyXdLtguwnGWB6Oey4R7jkd\nDhVk9F00fnZZdaiSZ96weBh33ndlKa/+B+IUjPKLPmdAMB2/DDpxmRPtP4IB\neFFj0ospyMH4Dwb7+M5SM5EmPb/qROTw8kCjdLZSs7Jc9jtdKuB6m2mf65fF\niUWFRKPJ35+T13BniR1LRJfkn5AvxY1fOx5JgvFwCP4PDlZhxG48XVu5Yw/d\nldqMKD7CvHz5EQGmeHFwhBmQsjwHX+N9leCiG8zlvjmRyTOohdj34u+XkkmM\n9ZDU\r\n=Q9xk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDp9Od9ec/QmPibf1kYpDgmHIHinf8TLMK8lBVw+904jwIgOuvfvRGrA6CLPE0RfiR5QMHTdLxVqG4GHa/JTkdcVyc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.02213ebe.0_1629480414804_0.2901215716517578"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.90a999b9.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.90a999b9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.90a999b9.0","@material/mwc-tab":"0.23.0-canary.90a999b9.0","@material/mwc-tab-scroller":"0.23.0-canary.90a999b9.0","@material/tab":"=13.0.0-canary.7da413ed8.0","@material/tab-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2c4d7acf2d3387438092d8cf5fa7ba37ca3a8b8f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.90a999b9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-JBXXQjVgGrBwVpOwywtGRL5ewvhYOIR0dDXxwRVWpe78qE+Z/W9obVbXp/GfQs2m/4ZTJvMlGjpN8/9KBMieNQ==","shasum":"e080edca9f7261eb07877b86b0542e09f38a374c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.90a999b9.0.tgz","fileCount":15,"unpackedSize":43821,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH/fFCRA9TVsSAnZWagAAOTUP/jxjtwBlYKWX9rvsC0dp\ndwWAECd9sz0uRSJ9lqwTgY7tUL6QAnIUkVNxtc5xfjUt8Kho9A0QtM7B3VFp\n0urmfsXDz9aSJwxu56/FEZPlBi+2Tn/fQa4Q/o5kbl/XFThtVbEraohOd2yH\nl8Sk4saMqKSdhQoS8Rc7L0O2TSiDyKbz3pLvJeRpZfkanSNOt/mSnKLoE1AM\nGO7g/yu+EFuySHz/gO0llDNBkZjvO3Gbz29olGr4epVVPokGzdcvfg468+dJ\n9vv9Asvz72HWhxm8oQDc0/WzhSQZIPMYI5BjvLPbZcVEV8xMMlG7xy9A0m11\nlAPtc+wkfpMi7w/m+epDaiXkQ7f5pYLhLG1SxfzCG5KZQiqUT9xbp0mN1yWl\nff8Lmj+EmT0ss16C/NWKQ7CG6/LwsnO1J7x5j5ABaLjdHcnVNQ5DMXsJ4bqJ\nhtMczemiooWDtepE71VRqM1Ex4OriPwoWaXqWrutf7I9u3tAC+zemC4HgbiS\n8/ZySWieg4CYnAEC5Oi5ajZ1wzQGcQTjI0xzXjtKeJ4vJpfBohON2wVFhknK\nq07dzuhSeqOFIlyHEHJdEEcIKpJCLN9Gvs3Q9HFjEv4uxDWbq3DJp67YJFMF\n97q3mFveGt58yz1UXYrb0vITUjwawTGb/u5otYQCbSOWikzLs0eEL7KN9LYp\nOJ9o\r\n=6iwf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsG4ZNSF01OOskDscgLbJcdtbBBLIvrbCWqXyP1uvMlQIgG5Cg5w/fp4RQQKdBAmasXBvNCXh5L0fAXFCxIjdOOMI="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.90a999b9.0_1629484997638_0.48886589182181384"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.6db58716.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.6db58716.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.6db58716.0","@material/mwc-tab":"0.23.0-canary.6db58716.0","@material/mwc-tab-scroller":"0.23.0-canary.6db58716.0","@material/tab":"=13.0.0-canary.7da413ed8.0","@material/tab-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"187faecfb35a3d9f67ae8a6ae1c83b5f796d3158","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/187faecfb35a3d9f67ae8a6ae1c83b5f796d3158/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.6db58716.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-eh/lsSggMohcsKeCGWgWlSS6LZnA8DJjb0cRQreukI/opwGXf/p+pihzR8Pm8n8bAWSbpwIHwk2rD7fe8hY3Nw==","shasum":"e47eb027cdd8426b6d67c4a226de1716f798412b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.6db58716.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI2WfCRA9TVsSAnZWagAAbzYQAKA99TW4shBaJdsBbIYz\n4H/tROU4xUmQJH8k175r4tdEwW7WD9s+hy0ORSAqjtHAjQnkHconiKG7UCYC\n0WhsuXZoy1KgX1RCz9Crsd/H/OKrAalkCxS3JXAXf/z9SfjDQWpO/3TgYXB2\n6KlqP+Gt3+w3mRQShCfuQ1mbJ3o92PahheLlMRwevEWg9cJ5LQVNyW+e8o8v\nBWGdg9VCv5gYl0TuEw0hXB3YHpTRMBGjIMDdG+uXzBrgG8N5xZzY39iNeUfO\n7nTaHSKw/8w45c5dpto0QmaQ26EU6MfGdxPkP7ZrwlyIKMw6wiMHeQw5P75c\ntmt+o6f7jAxV1Ol5is+mHqry6OQ41vkyMo92iM+sPKtqoerUqFKn67CE3Ekx\nFkf6wDibYNJYxs8AjF9BC50PjnenmD6l1B7XYrnR8CJaM6MZfZ1sAKSbFdbc\nH16rmAK2sTXN6EB4R901zJqHh6XP/kxrTm1WMKfPU+qHaLS3u4AQjSlin4vX\nWJXYLYTSvYirTGhChznwL3cglYgs6tG0BW4+4fRNiaEZcbfIbabl09JCTED0\nKSwi+ob+xcGNzXRa2j2kLEcaeTNmrwIKzzWfjbN/FxsZBuTe7pAzcfVmfPX8\nErbtbeWwco0pGciPtVcIktblDKLk7JL9N4he5/FoPpzYM8IkSXOl2O1X2CpC\npj65\r\n=Ennp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH2hXiLwvv800M89Y9tZhz5nclRx96emWpm4eT9wfvG8AiBQo2H59x8JQys/NyrrsJ/2CQ1XzLad3wHs7IJ+ZMpdfA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.6db58716.0_1629709726882_0.18584675094656866"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9fb5bc35.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.9fb5bc35.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9fb5bc35.0","@material/mwc-tab":"0.23.0-canary.9fb5bc35.0","@material/mwc-tab-scroller":"0.23.0-canary.9fb5bc35.0","@material/tab":"=13.0.0-canary.7da413ed8.0","@material/tab-bar":"=13.0.0-canary.7da413ed8.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"492fb41175c44033912a37c69d8362579b70d081","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/492fb41175c44033912a37c69d8362579b70d081/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.9fb5bc35.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-jDm2ZIbUbhY/lRPUlXTrklBr5VQcUnpYRKbkypqSf4qE1M9laLgPxwIhpKmnD7kUol7Fkkkg2KoVsnZc7DERrw==","shasum":"a0ae9419ee0ba9e609a8470edabcfb91958917fd","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.9fb5bc35.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJCZZCRA9TVsSAnZWagAAD/gP/0cPYeYiTlkRdiP72MXZ\ne+sOtRBaTtGpwcpHdlshwaTZucTCyYp+LGXeHk6mCmqg4M7VoNfOKzbNtsVi\nDD5g92JMloRRvWlmbOYQ8zaSCA0jhJbj0PeuyNmqluhXCjAXtSVlmJrsPaaw\nYmhZp6VGxmWtXFolKJpLiwEbW2zxDnjzvQEzevcJiJKwdVDIEvscwRfr9jVr\nNKY3dbghDqkSYrSQxBcz2pnqtKFZtlYViY+pdEE+fnuaOpb3AgCSvhLZPXVt\nmQGEEx6H47w9fbkBN0MYL76dIQemjKyImhEmtxftmgH4ImEWQzJ/Un9+yVpp\nH16vP3/TQrGqFm+FNqIxleXhr0gWnwyd8PJVMM+Co8s7lWloNZVOfHaTbcq7\nH4MUiWEjDM80PSuTJsZx00xB7xbjeLhVcAFuhP/SLaYvICdImUneynusHkEq\nQ+GhdpPiassyMd8bUgCanTpqbkpQXjEKtRWuv0C3LcMcDJNc+CyGX3swk0aR\n5QBQo1t0zE18C62PnpnFMqSoaoWnsn4DsRQEixvLkCC9nHBlsb1JEaMv+8yK\nzstN2WqzZKjv73661nDKmWgOP7RSnR//ba6L1F1Qg5A1WVhfrzHjzxziRr4B\n6COzX1c+OPjTEkRkrR1x3VGhMA62Lx2EUSf4Fl3MV0ofN1meiDW6bRx33Ee6\nFHuu\r\n=c9Le\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmXRsBveV6FB1Lt5nhNvhe23oCq4YnMcdKEVTU/DlNhAiApeX1zcMrOQZKtRiH9mhVb9p4UedJ6kuw8+9sK+O9HuA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.9fb5bc35.0_1629759064993_0.17728242928749727"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.ddaa5d8e.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.ddaa5d8e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.ddaa5d8e.0","@material/mwc-tab":"0.23.0-canary.ddaa5d8e.0","@material/mwc-tab-scroller":"0.23.0-canary.ddaa5d8e.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b75a351219e35d414333913249ef19e87282526d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b75a351219e35d414333913249ef19e87282526d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.ddaa5d8e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5FZyC38f1eV7k3wXtHIyVGYT4tkzWfNjhxQ8zWeR4hLFDODo8lZtFDMd++GdZbzPZqRACBe3qPGAJ7mL+jpFLA==","shasum":"bebfe315b44bcaf5da894403a0be2ef193800062","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.ddaa5d8e.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJT92CRA9TVsSAnZWagAAamYQAJVneRv8b7+CoHoM4vIO\nbauW7j/Or4nNkCbu6NnRvm2baF7c530u+yp6dxzviJRjD4xOKvCUKneUbjw1\n+rt+fjWSBwJFtvzvZMJ4KaaDukb70TSjQeC6v4NWAJ/j50zfSsOJ5QqcY10H\niTu1tOrleP7SpAydRFICSj4ikQcJCp16luoIWzrh1lAmSOQ0+REvG/9judY+\nnaINN0GHKILNkthO52Iqz7oS+UARGV0vCOO1DNdgDko+CEeeHITcxkMr5RIS\npnVLp93eeXQBHm3fkjFW+dS+bHYmfm5Nt1wDMEFjsrv3f5HP27RgZKwTX7/R\nTeonDBwHdZsCX0HHNJ2ef5mcfVrlzXBsCVljYyBt5yw+hns1wVpUwB3qMfPE\nvy2C4s/H1IV7CKdSluYw9k2qyX9ITO8KcDQdNCA5QNdb+kBA4EMCfpcOw5r+\nauBnpwJDYUbsajWgAd1FY75qCFBcHKQgNX55bOPbWqTr6yKrhPXjQkFFPBd1\n0cxZ9Mwx0kuzpNDrB41W86hUAB+sFsgMHtD2pVSd5c6k7xii1lMUGIzYP4MS\nRZ1aHSX0rL2uyfb8DUEZ/ZV3PbwI6I6bgn9s4vuAwCeo3KXfY9pecggrHYmY\nxbWCaQArNwUhi+RLjnro7ULhSyW76GA5C1Pjp/tvoGkxtO89vApPGl3cqFB/\nqY0U\r\n=F8BA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBLo0ZDMRGulFvY5R/XAkyW1xYwejre4ugDifu0BELOlAiAiAQhN9n0sZNt9JQ+EIQyuz3s8Rsgy3zqcplar2hLOkQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.ddaa5d8e.0_1629831030197_0.4220409033013732"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.756208fb.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.756208fb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.756208fb.0","@material/mwc-tab":"0.23.0-canary.756208fb.0","@material/mwc-tab-scroller":"0.23.0-canary.756208fb.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"f13e06c94f8ec287642a6c4a258c32f5be7a17e6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/f13e06c94f8ec287642a6c4a258c32f5be7a17e6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.756208fb.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-XgAvzdRXEWCDEr2/S1oG8dU+KNRYZB10C+/IKEq3xxrC67Ux4MYXGW7Jzr2nbchT6Ad6kXHMU6W2GKO6V2NfkA==","shasum":"c57faed8c122dd1a42c7bb7e326fd07ffdd79eff","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.756208fb.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJp88CRA9TVsSAnZWagAAphoP/05ZmqGmPGIuHg3Qo3mG\nBnYwlHVl5iePCmJ86ZCrP1ub7GjEm+JO5hYk5Dj4u7BAiPLtPHskwIIbIDwm\nuqlGkXoudtghitcAMdR8mlZllESIPXH1v2I0KQR3/wVW1vKDKd8ZyigmttXY\nGGtgwfGcD2lT1miKAy+rgqefPUU3mWDmeAl0+nu57hSbyxAJ6VcDPjHkOLme\nJdpEOR9DPDr1/qr5hvr+dzEkqFHUSsIHTZbQAHX0cfIw7eoKzMSRUOLGsgkS\noBBfGPXWVJKd7CV7S3EctH62OK18ct+WCSiOsEG034ULSzc4jyU/m9QhxSBr\njbLX7J8Nq0ZcvreGr0XjzI6NJjVq4W8pU4/Gu+IPKre324K8iFt1xitd/NP8\nKFqI5nq/bIayUfnvjEMdqdPQQJK639B1cSN7PhvAbgto47ZLgxvASqnROS4B\n4OAGSzCbP2Nn1m6AThlUbkrlJbOsvWHxLtX07/eBdvIOrn/kz8Et+WAghGuw\nCRm4EhURYPZpPHWOth96bHA5r4hUIp1FQQRxojQONS7GOCZ2OkdVZnsbxGUx\nxSgy7mjRXLvret8+hgloktupBQ6Yarm0I2S/OLVpr8YeisJ5T5kXcIk22BFV\n8JNNtkgRXn58NiG6QQRFXZrrwyq8MHp8kGAE6K04WY12mtgdy8TmTWCiEyCa\n7iY/\r\n=riuw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEmCkItUVSn9uLg8OqwLQZsqBHaH7wUrLaFiGV/V2jDnAiBejPC1Vsjm1avd1h1QJrEDeF1r3/0XJlUDdO8fAy7N1w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.756208fb.0_1629921083940_0.5185321675144989"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.9576dcd9.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.9576dcd9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.9576dcd9.0","@material/mwc-tab":"0.23.0-canary.9576dcd9.0","@material/mwc-tab-scroller":"0.23.0-canary.9576dcd9.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0d9211bc7f0c9c96cb4dc480ff59ae633f722977","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0d9211bc7f0c9c96cb4dc480ff59ae633f722977/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.9576dcd9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-3vpy0LazkFiTtIZS4ld/A+jw1+6C2Dk6dpKrWFLnYdyQhyo/WbrB24a99iQjhB2JpnIla2vbSJE1pDLxQVaT/w==","shasum":"a6091ad0cd8346d7d692f7bb8aac4692ad39d6f2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.9576dcd9.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJrnFCRA9TVsSAnZWagAAusgP/0zzc4YcdHwkGbM2BoKm\nrq3PyUU3gxLriae/KWhpGLg+h2KYTTsW/OZEaox5V5sMwlbb/UgERTHIxIjd\njJhNYEwk8raS1HvqmfH5CkGrtmH/CwaS/Qd7h1NTuUPkttqpYLmfAZ4JH1HO\nsqT299blZKIlNN2aGaYfbzGCUh0B3mIYOZhNA9XqF71HxujnmD/5DMgjMORG\n6DsMsF6aVAEK5VxzrwCUEWWVLf+gK0aDGENRN1BNs2RPcsiFDwNTGvIXbBbl\n7Bo/zRHHwEtMxlZKyoLpgzZ67lWmxhIS7jxZuURSZZSZfDPFwGiEBPfDA+pH\nO2qTgjOuAD25cgRBaZsBS2qQOj/QBdntbj56ChSj0XH8cmjY/o3DFxLp7Yvi\nJGggMZUuaomaQvZmxC2/KjXLeonGkujw56s49yd+NlUTCWewqy5WK486lgIr\nMFhtigTQKr3bszumbMGzSnjYrtcgTu0Sk2iHTrhuxYTecOpQg2qhx0rDGw2U\n313W2Sr8V8EeC8OFKBXyTpZKOaf3nc4Cc1RCtCo5yyMHUlnZehDPptwXaHpL\nn7uTjWa3p60ZSfPSAQBWN+ZQdC2tWX4mvOsLN05XYp9/fJ0Xr+Vk5m1Q2h7c\nt3xbDBicGRXiibvRl8GAO/k6R4n98CLsAmC+eq+VZUniQL640p0423lajbPk\nCqoQ\r\n=swZv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF8xdpC57XWJPCaUDOtGJZ3hObHA3y6Fos030b3pPvCAAiBgf+naHht+S2ZuIjHEF8OaxEYsIstlnKPABHXxEi0veA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.9576dcd9.0_1629927877647_0.9996670289494052"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7531cf97.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.7531cf97.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7531cf97.0","@material/mwc-tab":"0.23.0-canary.7531cf97.0","@material/mwc-tab-scroller":"0.23.0-canary.7531cf97.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1baa3308fe03250097e96c18c61446a8c8014706","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1baa3308fe03250097e96c18c61446a8c8014706/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.7531cf97.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-yN1p06Tyx+rD118VTM9qM+wRSQN/oDYWXJfxfH6tYhIYjjxMnKLiXmTt9QGV2bPkSQn7d6si155FyLnqkK6i5Q==","shasum":"3b3416ab669d919ea627cca605827a5c1debdcac","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.7531cf97.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ87dCRA9TVsSAnZWagAAIcAP+wbxPaGlkXc1xxRn2S+W\neuooCjVqt+Xnhpqi0l1d3bFExGKW7Yyo3ulcWuSDleg+Dz+7+BnwxXT2zd/4\nJPItmrpE3wE7A1uCnGN4UtXn8vJSBv6bD/lv8ugO+s+mGe9FyFyaOP+lo0SI\nw7lUAffNnr/uZ81qIitUPmbpDtPtypNqLxbNZOHh2SLDOcF5qG0w/EpskuwJ\nHbB1TrrD72I8h4rUQA0sXqNynHjGhv89CikO9DDjKUSuPLP3bTzIpmBhTs2b\nyAR2X0sLjlmG3EU+Z2ULrLfRzmSDjcx4zKkgLKaw7H6EEA+Ag+hPtTeDtNJu\nxXDg2aIBnPu7s/9Jfvrl30Fe8Evjacws9ycNtNT/mAximGh7fBvi7wLb85Rr\nIRUoHB1YCEjZlFIthsIK2q9wGnXYOUoB+OuWUytL8K/6gXejoE2nhS/Tg5+K\nDk7FOH1clilXZ65Z4A3w7cesyV0WEJTffl/TplAW3TGdle6QDaqlnzJXMDiT\nYqC32PjC4/pdm4lhQH6gHswvDp2LbmobSbPhLPuyWHS5w57yER44cIkEIZIK\nwN5Rv4zMhu7YI1FoTPsws/lcYh8IWuXn6K3t362JqAHN1tYegb9mh1xy1A9W\np8M9fFvR3cOyROsxOtVgqYt4FOyt/k0L13I6GNLhxxd2k5RL3oCvb9Zw0wve\nA8Qa\r\n=1vk8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6+RMOzzN8KfqcPws3pYomKtmoyhqCN4Sfagv5b2WtmAIgSRuWtQCdE9SXWohsdeLtsaLjtZXHaTIZ6c6rXaY0xUQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.7531cf97.0_1629998813786_0.3180081822906544"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3bab26b4.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.3bab26b4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3bab26b4.0","@material/mwc-tab":"0.23.0-canary.3bab26b4.0","@material/mwc-tab-scroller":"0.23.0-canary.3bab26b4.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1637f7d8d3b8a228e1a957d94d122d9a840a63d1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1637f7d8d3b8a228e1a957d94d122d9a840a63d1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.3bab26b4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-Es+DsWQprnkNas1+E67N1sAzcEs18aSPCzoBtHDFK13srA5qGPW+mruiuf5+Gf1vWt/TweLJppFBHPSKO/8u/w==","shasum":"7f620e25f856a8cd526d9c64193ee57c7d123e48","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.3bab26b4.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKAt9CRA9TVsSAnZWagAAl4oQAJt/quZzSaYFXVi9wujS\nHUEmFQC8D924hrksv+oVkXrtAtidqoJWU5A7ipK86/xqHZsmeBvO0wvvv7R2\nrIAbDoaBXZRLS4hcT1UamhD0O1l24yWwNJXa5Les0nLTvz9TnMTFsvhvGIhE\nu0otY1m94RJHK41eHKERT7URILsTPHQC0xeXvTfuasjWB4An/Ehom0W6PC/9\nu1dkCDaOqq7xQtGVEjW00+YMdZVfPZpIjssd7tZhEFOdlqTybWIbs3Bb9w3C\nAA6R8VKweHrQfBjOOUnH1jTsNboujpDeXuXk36k9Ff8RBgWQ82LTIbU5a9g0\nA15zqoms0J2k3ttIiDc7bsPRSS6e06+RM1eQus1eNZzHsv6j1AkIKcDn087x\naUXZcJMBZqVGNc0dKuCLolcs5ZK07oSOKP8HjNt6SMogDyW02S5Egv5FN5O8\nl9Mgz8mYNIoOinuV/XENNQzsjvbnEpTWT4o4tZlXxwbf6MhE2zR5etQ8qzF4\niY74SU6c4iwcLaEadVFNYUdRmjoZKHQIMblxFzm76Flda4WhURkM9tRmY1iH\n07Vn58vaWz1QRbRrL888KPX1mgjksmb8EHLpXtqaTG7hbNl2DI287A/VPqf3\nVtxNBS49xVnuM7wm38tos9UjU6v9CNSQZLkIQNEq468v8AHjbCaDU6Ou9PYj\nriKz\r\n=/y9f\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDgHGfqC6V0USehYOcsTncghmPVnibtc6zcHpbhPqmJVAIhAKku9Fzmbrl/n7v/hKfQSjSl97k6p9MDAVAiXUtQ6w5t"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.3bab26b4.0_1630014333521_0.5533867676318789"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.fab48bee.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.fab48bee.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.fab48bee.0","@material/mwc-tab":"0.23.0-canary.fab48bee.0","@material/mwc-tab-scroller":"0.23.0-canary.fab48bee.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4c3b20e414501a7103cbb2397163d4ed1c7d041a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4c3b20e414501a7103cbb2397163d4ed1c7d041a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.fab48bee.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-IgfOQKmCL37QFE+q/9m0L9nMz6gCNh9p3mWJdoAX7IvTWDfItjFnI2CaD3E2LOXCgIBRLVAfXLfivTPcNhVErA==","shasum":"69ad92d28d53082588931da03ca08a5379e40fb9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.fab48bee.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhKBDbCRA9TVsSAnZWagAAlFAP/iKVD1jgoZ+xJFIvdSy3\nxvNa/O6hqaH7hhEtquOIjcLGmKAC5UIzgm7Q4AblMKnj3Dmjsna9wZn3NFtp\nZuvHUz0h8Z0Dt0IEqMJm318b/CLvYsP7gJJ+4SzEFfRL2gm/PP2k4C2pdgK4\nb3Xcyrs7WqATHgWNi1nzryLT/VTfqAZmdckKw+ITUwhkBEXpUeZalb2Fagvx\n5zM7BHg3hFglCyK0U7XrRQqUOBRTPnf/z7DqSwZ7YT+/7pjDuDL7ZFYODYZc\nU9+KlFnEY4CSKtehaUehRvwa4LJJsCodTHX26XjAHApQBwi0GysrmHtgdriO\ndUmJJz1HBJY+lLlRSj5BQndb6+qZQPqWD9+C733f2oiz1+Gcrp/40cZLiM63\nKK/UA+C7pBECGjGpgs40vxQ/qdTEne7bCh6QdmMCDifFjxMyRlrVKmYKdaVG\n1+JSIqUnZUUldyDORQ9+Or3kcyT4jbt8x6am6LY8hbjHgEFbnsa547Q3sm8r\ndeSPGpo69OTDvgwc2bPcmKaCWiYZlSpwGrUnmMTb3BQlqVmwc26CrgXdyjwc\n1GE6zRfi4B+jYa8LVp1+foDA+OUBotR/NEFVaJVj5H7SL/QsZMqBk9PZMJGj\nxBk0NhSnVvdJkd6ueLRqaw58CYoiGYBISA5gi1X5r1Xm8AT73mZfBfBpjlOP\nv0dO\r\n=pdKj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIECIxMC5u2qbWb2jP3MQMqQQh2rVqDeQZXpC2qbOHKB1AiEA0pCMpbH7WITPGSv8gBUkLHImgAS8RH5ZrefxJ+O8h+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-bar_0.23.0-canary.fab48bee.0_1630015707821_0.7817277294637139"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.dec18df7.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.dec18df7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.dec18df7.0","@material/mwc-tab":"0.23.0-canary.dec18df7.0","@material/mwc-tab-scroller":"0.23.0-canary.dec18df7.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5fa2a5aa7531af47c2a307010d92ff5fd27006c4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5fa2a5aa7531af47c2a307010d92ff5fd27006c4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.dec18df7.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-fDGFqkN7oICYxAig11naNlWTKhGLqjHyCpE8aefCWJElNP6/AF3dBcexEGl9ciSjxiIqb7D+/7zmlQzBoikw4g==","shasum":"c032d0f3148a639d92f97447b939bd99591d78f0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.dec18df7.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLJb3CRA9TVsSAnZWagAA224QAJj3vEvuH7X5vEexBEeR\nhppsfCxyDOCmtfIiPMEt82HGVa1DxvT1BORM0iB10rAYxyhgj0ONC2gOrVqc\nPaOjN/WuUmlPIhVK3ARUYdW5NsRsGugQQBymhBklKfrQmZydH3HK5/xoCcW2\nZ3bRCgQmziXpizkdzxRFKbZbySk2CzvzsGGZ73BqzIVZzzEmV9hhvhlYnBzQ\nJv3LvsorJLScL7K1lU5nW03fUBXpp1GdSRpbGD4f+eJtkUhlPqk8Viprqx1G\nvOAopc4hyNjhGTDEHc1laqtSgErYBUxvt2u34NNxkmLe9EDSxHVbaOwsdGp+\ntV7iclVfx/LqzcSJkak/V+M+tzN2KnXGPNBRA5sy9z+wywD3OtgpAUh8rfvZ\nE6KXe9alIWCULpXwqsz0SnHeCdXnb8Xn5myIU/H11ogRThC39y2pzmgbX5Lg\nkU3bYB2WgV7p1hyyxhrpMh0g2cjt8btePNCJeYwLnwrQzGV6rk/7EZ05Yioe\n4BKbR00fTfXi6a9UOW6pa4LvKsU0pcR6T27AAQbg3lmMWJJzhR06wmE1C3Zo\nnV47eO1j37ljQUOwabm9GbdwWKzwVzurUN64rPe8tPzE6r4XRgHCmJYJftut\ngtQW4ltrUvLy4FDyhk6H5u1lzPy8g2tQjdcqQ1QHWRByfAzXIcniIfuy3nJI\ngy7d\r\n=JY94\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICoE6jH2BNfHrXpIVfVhmwBfSSo9wkQhLUqdOkrhwgbfAiEA/TG+oNKIdCuV1TTaOULJA8i7YI5IUCKF/SKAlc49tcU="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.dec18df7.0_1630312183296_0.7726626984958846"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.61fe5b17.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.61fe5b17.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.61fe5b17.0","@material/mwc-tab":"0.23.0-canary.61fe5b17.0","@material/mwc-tab-scroller":"0.23.0-canary.61fe5b17.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8d712401a1af774c1e4dfbf07ceadfd36aaeb5ff/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.61fe5b17.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NK7MK32JoRnvPAyeatDihsFF8x5BAW35lB5LbW/I0dMW+RhC1a7vNrdh3g7bP3URVx37hwQfwoQJKVeiX4ZpFQ==","shasum":"1f0a4fd18c814dc7bb7f150622b2da512ce5823a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.61fe5b17.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLTGWCRA9TVsSAnZWagAABXsP/0cGS4hHn4OO7j+tqrYu\nRJLJYPfl24WsoqGorC7cUqJXDAgfdHtWZj0u3Zz55fiVwmIXxhHfsrLmzJdi\ngzdIbXohfhh7WySmjNo5Q8CzNXeIcNO6l35btW+Csarv+mFUH9NhrwKMsx2s\noZXaSY+G8XdmPmhKjM+8qxFVyW/DWI/s+32DDNT0iHoDzUzI5bjKsPpbYwQX\nBX0ZH9YzZZSPQ4QwpP1kuqSmvRjhuqu7OqiA+ulqerZYlpxpmCOY9Gj9io+M\nNxN0WxpJDITfwljGnIxk0G5bkxXsqX64SfCtROUD94nh27an/MHn+VwVoXRW\nvNuYIemVf5soSiKYfXHImT8ASJilPCqFya2cvay+w8VXSCuv+hLwVVscORkM\nnM5s/caHu5wmGggQzJJHwhJ5AIjTxm2iYM0dBiYYPQDONoOnWPmuFq4MPfPv\n31NrjIWFonx5u/VJEVIBrS111TbGrUsdT6e3lAtjpCDfKs27WQqNNdx0niHt\nupNlPnneoBvzrykzTKQNSn62J6rRn01lb3sLYw8yW3bY6X/0at7F72MnArLv\nAnTrSv5T9D2uqom03hmBMqYH39yxwFRkqonASVJ2Co4veBEKqn81igWQh7IT\nSfAiFpHCnWaY+TrzR6QU6vHDpHwWrgq09zk6tGWGYkHtNlWIBcMW1g1P4WiC\nFw/S\r\n=3a+S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGvxjENxEaC3dhsFFH4DKS/rjS7QlFn6NOwcqUyzzwlgAiBWVqJm2BklRgbcEWTYigN187jdJ8Ej5ln2oTtTjVc2Og=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.61fe5b17.0_1630351766674_0.9183870278244208"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a8c31f54.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.a8c31f54.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a8c31f54.0","@material/mwc-tab":"0.23.0-canary.a8c31f54.0","@material/mwc-tab-scroller":"0.23.0-canary.a8c31f54.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7c390fe40361133076f70c076acba4dce24e84bb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7c390fe40361133076f70c076acba4dce24e84bb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.a8c31f54.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-WJlQb2lI5lKQE87SvDWLV4lbesvbwEPHArQawU4COBrjhBYixe90KMc1YFnPeCZTH+oVi4aUcnKbTP/PX7CynA==","shasum":"3461755fecca84c7df388a84128da2eba2ef8598","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.a8c31f54.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLUBOCRA9TVsSAnZWagAAaSoP/137mjFKhKWWWdyhjE0h\nyYIJm+Hg83/HGr/wYswXsQcwobw5XCzx5mCTfxS/b9xdd4EtjYFikAxENpfZ\ncNz8FWDwDkiRLaoDwec3XjDQVECHy0tzidcfwGZAlK5HyOXROmL0ABxr/3bO\nRXbvPH1JNtjGRAg5etd6YdKCE+YsAqpvdXHH8owvUHRvGTVx/r/KEjzhF5aK\n21g6o+9fghFNMd4szJLWPPxrlRDxvMETWgeuRp+cWvUSm1hi8ANHCbhn2Bu9\nCPHVTj5KYzpwu8hElAnxSdcUto4gOLC7VKgkA4OA3UKqbsqS8CZz05KVQ0aG\nNnLfXA1KFSFCmWcNLaAAZb2g9Pj4HA7safbK/stNW5kxiZsb6wu15PoIT+ju\nqeETQNfIeBV3WusLuQdahGKgzGKWoYBAcPvUEEqNiqpMC71hLHo498F+1Avo\n3pHYK5IepdjV5iJEolud3cvck50xe3p0reI2ezhlphgt5F0S177eLGdb0fBO\nteMk7Jzw9aX3MMdlOPwjvmQUoiEgZti1NSRrQsCn/FFFvjocUC7YAVeybv81\n6UF9728dOhWIcLoaeFRBymPS4r85VO7Ob35Otm+YM/+qtKeR5NaYo5qcyl9r\nKGjuVqIaaNpLe3TZXB6lP7VQKzfHJfv46Dau/Du46r7UCSZpbPBpw4fbLkq6\nyurH\r\n=1xK7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAKg6M/tsvrufMHHaGbWaFc9j/EWhfBgG0+Y1y4iiIeVAiBj4t9dmauG9o2VMEj55MyTzc27x8QY7UQePsXzdtxn8w=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.a8c31f54.0_1630355534368_0.4857382073313854"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.a096dba8.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.a096dba8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.a096dba8.0","@material/mwc-tab":"0.23.0-canary.a096dba8.0","@material/mwc-tab-scroller":"0.23.0-canary.a096dba8.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0979a05922649d16cee4c4ef15ed0c3c3e9670a6","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0979a05922649d16cee4c4ef15ed0c3c3e9670a6/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.a096dba8.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-+AiBpTPu3jok0HhbFmC8BFBj+5iAkJ0w5SOeUwfdeLRiKeLFEBEBwbjV2gLy2tzY+dhgxk2zvSJgey6HVAvxOQ==","shasum":"f985ff9d38480b6071a31c346f4a693f465c415c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.a096dba8.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLqr9CRA9TVsSAnZWagAA8gAP/14s8kXDiIwPATllE1lp\n1eZ/gTZRdTQV4dYlzoBnmhiNIdhbrQhI9E/d4nVeKeqrVNDDzKZu5fq+uFbR\nanYwhH+7VguYDdBeoRAhyeP8TsYj3Uza1WGlfEp+xprWTxQMOJDTYQKoXKBY\nR9zGCWpc7u9wvS83RlrUZ6ojt3YkBjoJSt4XS+2vC4RiAvo6HqY2MzxYbsJF\n8SuDgd6NQ1wX6/Ul0V8WkgfcnNjjAESTzelrU9mND1sM5/k19L0k7qWnT884\ngj07bDYsBblW14xdtg3ejcWDV8IGp4lSYWJVnfSI8N5PozZNTcqYJc+KUks0\nC2Bnqlpz8LBuyG/IQPnUwA59SFSfMB3dYUZIrF5c74sZE8bf3Xoo2r0hJGWr\nH7/WTHaLO3X21b7iSaeoBqtuiHovxkifcIiVlMRVaVUx0IVz/ctsVS90lv+V\nlVo8Etl1cc0FBCz0+5rsALKb7uKC5MRa512/G8eBq4eVBvXBHYKmjxNlFWIU\noV93OwRPDmAvnnX0ZjMVu+Zqd9Ceyy0FdeWKxiwxjwULemc+KHS91l3fo/DW\njS8rz2ZZU7sLsfyjheUmvMhb4126+oBTxivDOaWurD/Tjz+H1HOuQozZRQAj\nUUix9BQru4U5cr6Xq7pLHmkO2VKHzQjMTgz9dkx25pN9+j6C9GA/TECo7iWJ\nTAt5\r\n=i4+e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEb2cBDX5aBV0Uj+/1d8vGkN6QUtsCAqDuw7chGO+L2mAiBhY4zKZ+x8+gqc2HqPw/bmR/hO4wnG8wTDQUBLe+HA6A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.a096dba8.0_1630448381237_0.6950350397862797"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.7ec04d47.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.7ec04d47.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.7ec04d47.0","@material/mwc-tab":"0.23.0-canary.7ec04d47.0","@material/mwc-tab-scroller":"0.23.0-canary.7ec04d47.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cc39e72f38b02c8cad467741a3eb549b35590ddf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cc39e72f38b02c8cad467741a3eb549b35590ddf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.7ec04d47.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-MlP/atxJmXmQA3ce+L8gIhd0GAdMhiOOrRYvGUg5dL8yj3+FHWg+PcdsvcC6L8r5HyHzywIMSIjlyeShF+MJPg==","shasum":"d7c5aae41555ef8eb67ff3fae3efb0ff4f813388","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.7ec04d47.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMV2QCRA9TVsSAnZWagAAdoMP/2QFsgnp51QZXPMkg8tB\nrsr92QE9EUnXx5iAsnJoYOqrv0DTpv21NJpG1houostepCL6mLYjv+xAPd9k\nSSTjc3zcc0HRY6o7mYTNSM6qK0HzDk6RTFgRoRNaLesc8VuiGlnE1hcO7Gam\naEwk7eA3/S2dDqNBULGjifp2BFjUZu2n1wM2M+SkRVeUuiGU5nwarC6lGoX5\nZzU6kB2A9WSnlq/2LUso78U+o+4H8Fslg5hOnPX9aKX84yzx509kLdj2k2Jl\nk9n2OG8ZosbbWPhom1H0G2A2DiqDZZVdeK3tyuHf3CdCCovDamFohvGIgd7t\n1LA7Mdm8QulZJOyPSbD8mkj0mlDnoaM7CqjvRCKzz80eU2FQ84Jitg3o7MoN\nRXy6j6GLC6rhN7hV0c8Bp6UDW4g37ZmVSSorf61T3XQgXJYRAiP7TXjd3Ovi\nT/gE26x/F0eUX6MAGrBqsY3om5HacguQbCu2rse0+NJWpdJlkePOkWjPHJKB\nKyb7C1d+iydlL5WUpQEF5IdSIsFXzLTM9UkGSUgw2r0hIsFGp4tBEkum8osD\n4dQkrMVxq0yuWVxRtwgEdFOqO0QLC/LBREq7/LOK8BRgD2YcMa9OLytXo3Tj\nd01aaFMyb+c4EG/Sq13yYEgbM05XFbkqt6QgMwHFqZb5kTN8lEhUYgkhXEo/\na9tV\r\n=6M42\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC3sDOQgUGyaE1AOkHExxtUtcrR0LoLmCZd6RnBRCzUagIgZAIwT8c3KLn8fDx1V3cTHPAm+TznwFkOTbInkAy8R1Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.7ec04d47.0_1630625167989_0.02347889173368456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.d00b098d.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.d00b098d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.d00b098d.0","@material/mwc-tab":"0.23.0-canary.d00b098d.0","@material/mwc-tab-scroller":"0.23.0-canary.d00b098d.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"918e9dc10ef626db369abf76acaf3266d5437d5a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/918e9dc10ef626db369abf76acaf3266d5437d5a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.d00b098d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-NgdFoD8xTcyWjASsNZnJ3KL1aE3gTWoESKiwFgH+d4x2Ioc9Krhsdh8ufw3DG8mUEoto/dcY3Ct5czSuHw9eAA==","shasum":"dbac3f63b8f260a9ef9a0eae1d40a12d002f8a1e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.d00b098d.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMpM5CRA9TVsSAnZWagAAfigP/i2Z/9+vaQVBuqTR+gqm\nB/Lm7w1siTrfZocaozvNj9nhuDsf43zmMRCmdSxcCRhaLgE5q1H1oQJDR+ir\nenu/av5fTGmUzuaTvpAczF28ro7vXbJIuONg21zw2n2XXbOKnj+Cc3l7bgtZ\nRpcAno8pa+gEaxH5O1MrYLi0hPYnj8rmQdCpVbdGtN3ZymvWQeqG5r7ipa8Q\nZiS9DC3S9dL4YnWQksRdheg/q5u1cgPw2gus3nwB18AaZb+YvOIICF8hmb7s\nyUVzjdOjgnCBxO350FSj/hIIB2BmA1Sn0UQeHmO69ENmEwDGMmHsk1CK+sBQ\n3aJhIb5UgushoJ1/YRJrz0DBN2SzGIkKCFXadks85LpJtdrDIrOM85KAWjJq\nbktWneFbTible2txwp6Q21v4xMz5OKs7ZSU6gDN5KXBCbR8xf4lNPtQWfXno\nYHJm/KsGjanO3IAoif7LsfesfzlJ+5mr2zRDEuqeBn/Q4o1TwmTgjX6CsV/h\nIjAH3WRwTeDSIgr13Tr2mlIie73DKAmPCERz2NT5KBRBTESOmytPzRk3VKiI\n41rdmuGbhuIe1IFVEOxZvS1BW8Jei7YjSEUjn8nBMYRMAuqNgGw/az3W815e\nAMsfoTqimC71q28CPWO3qtxoC7/ux+HzBqO7FJgc6sOqwhrUIHxyT6plc9ch\n0SXy\r\n=jmr8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA/rSvHcpPaoHA6O7zWR62uYSRVcSd5Nny8QX5G/CAAnAiA0iuDLitt6IjMUTjslKj5StNQBrsMMy9xtiYPm0bOiJg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.d00b098d.0_1630704441144_0.8978495099339734"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f29b3352.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.f29b3352.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f29b3352.0","@material/mwc-tab":"0.23.0-canary.f29b3352.0","@material/mwc-tab-scroller":"0.23.0-canary.f29b3352.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ec2a4fddd95f3099eadde4522a67d49cee8d1515","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ec2a4fddd95f3099eadde4522a67d49cee8d1515/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.f29b3352.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-THq/wZo124OFRGYn45tP1PgjpJ4R4n4sx9Dyvup2sLvB3EG4QCckXhG0WWgIy4N82QFCAF5WKTIhVpxLOSxkLA==","shasum":"74453c5cafc8701f7d268b69c3523415bb00ea18","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.f29b3352.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN6yTCRA9TVsSAnZWagAAG5UQAIlB1sF51xTPLZj7amge\nlrhv8vHPQca/qFR0DaLPqd4QNrlZKBbYbQs1mMdCKfYb91pl9b2reetWuvTj\nmER25GNs0KE17kSaQg+frnCaL7uinmZmHss3eDqAdEMokfRIhYs8ry5zdpcy\nuZ+OGkWlIXs8C/H59+Q7gH9/T9aCFligDUTp3omRERobuYfM6BwVD57O09qM\nFKj/o400wOo12SZ30ULgACczZnpjRhyvt/TFzaLRpQi3EIZFIjwoBjKB4sGD\nVK3EB5eSPHFGeSxwuCXB97zdQ7F1i5i0L7e7Ntwg+YUGxbfJQ7DsV2ukVh2x\nbbXXt7DoAzdCBlJRvuOxQBuFX+rb5ve9vQ8to3FRuxRN/xb/he07U0ZqiBgV\nLt9l2nUMeA9xs7jGvuCyHkMFwnC0WWQat3ngOX4uFrLqGPlQHbCN3ZJqWvE3\nTlJMwLtfyfAW9oNGJ+rJ5ZH+qkJdiNwY9nRNI8BX6uUjMm/ZhJqOSgjKxWuk\n8QihHUvbooud8keeK/Co9WOjS9cqF7oPbOclQoin1QRpBJU9Bgqsh3Kanq1c\nwh8npykBZvQlNgR8YapE4cMUK2NDyfppktAuyqTHWpw4afvzZLQrC9z+wJiE\nIg4VrL4FMBFxHW9kaib8An5lXzSvnoNtdxlZEkPny/KFh9gACoq3+r/x9VA1\nF+Lv\r\n=9HrB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHPDsBPWYIsu5mGzLsYC9Y31MOceq7x15BaKRkaG5kKYAiEAy8k8Og+tGmY7JDx8cGRvFRF1X2ymmNqT1re/FHi2w7c="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.f29b3352.0_1631038611612_0.9520554839473456"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.4962a163.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.4962a163.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.4962a163.0","@material/mwc-tab":"0.23.0-canary.4962a163.0","@material/mwc-tab-scroller":"0.23.0-canary.4962a163.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4bf68ec0db23b3011a5a8c0777452925411e8552","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4bf68ec0db23b3011a5a8c0777452925411e8552/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.4962a163.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-and18wCkHP4rVIyx5I38QifBhEhiG6bi76S307vOf4v0XGQyKe7k9ULLx7bGEyo0Er6kfoCcftIBP+clJRPKow==","shasum":"ed27fcc210b941dfcadeebd1458d08dd6e8415ea","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.4962a163.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN/udCRA9TVsSAnZWagAA+hoP/3UiwcuIZc0QiK4Tr64f\nyS60v/BWSVI50Tl4OiesLQLBpSjg7qDBtMfeq55ikswEPSDjPrXzEiPayggd\nK/WnBhFYIrkQ6HRzlHvbMHXoinCfTsfKdnj7TMxMeCgxjacYKrpVnx8f2FzY\nVINvyoIUJzKxJEgzAWaenpi6uTrlRYgfS74csp/pJRPo/7ld5/tj5gViWA6Y\nNEYSmXdy4Z3wK4ptQXwyOe+vs2AMuUfHRJajHP0zXkQuKSDY9Aj8vlGoMAVn\nvgu4fUqihA/I3R8yUDHhuwPU+Ray8PwfnhyS31q37+Ky1YjwiiNWLBfofTA6\nih+DUh0YxBp4QwttbUGetru/XSygnaotyZIIdTEbbuknksKG7mYFBo+WB4Mi\n4iOwABfxAWCo9VedfvNHKK8zZo5gtHK+gxtb+9hTMfzyz0rlGI3S2RxF9LjM\nvrADTaLz1ZNaxh0YTXCw+vph8KyoKCLINLnY2q+CNmlHDlC3jdLLTlcCI0pA\nbWPVRXNz1BHrkQZZjq3M3gYvLpIADUolF4E4PdzXy15nDsVR+qK8kJoTZaaM\nij42YekN/9RYh5t4G172NVWZy1uASioEcyMWGjM9szChFek4Srkm5+VFpwj9\nM07MlEr4h07NWI396m3xkWoku9xzTxxObXCd1hwmHqH21/Xl1C+aiprRvQvF\npdYF\r\n=O8pc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGlq494EM9Qb6nzRRwy2MG/sYz5L2IvoPBH21g0L1mSoAiBHhyYadx8rcZdPvpwaSvcCIKsYKyDEl/odOkSFyXewzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.4962a163.0_1631058845189_0.7247001065680745"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.33102bf4.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.33102bf4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.33102bf4.0","@material/mwc-tab":"0.23.0-canary.33102bf4.0","@material/mwc-tab-scroller":"0.23.0-canary.33102bf4.0","@material/tab":"=13.0.0-canary.15981e9d9.0","@material/tab-bar":"=13.0.0-canary.15981e9d9.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6445a1dc819d694a36e630269c7d407b8f021e98","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6445a1dc819d694a36e630269c7d407b8f021e98/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.33102bf4.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-vmt1pXo85Vjo8H6yv7voxEa1I/Pl3WdAu9htrf3keL/F5ovsl7wZ1SbbVohoQx0ClUIFcW2IkBhfdFGMGKP2dw==","shasum":"6e662d78a9ffac1b48cd3ffcd279399506e9f79b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.33102bf4.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOABYCRA9TVsSAnZWagAAE90QAKFnJGeZLV0wl0jzvQcR\noyrMn8JQYZJGz3Vwl8v0Ak8cRqRu1VJLkuc6oT+VUW90Ncaf+pd8Y6YgHbXm\nz3Of4ZolTT8d6zF/89xq9tJLd4Qa0H8so0M/TF6LP7BFbbxdKMnZer1denpw\nfZ8bUsSFrFZaVgev5pxnnKxmaKTtgk+omEgSr/xsg66iPv2OOqGazoLY8iXY\nxJPvB5pVL3jacOAj7c9Wzc4xqUS6Ppacwe3eBPHv4qytMgXGztKEvxiyyhdk\nglXGW4xlqZ5S2iBpGAVmKGuT6/kuHr37BJgvRzKvEqyA+DCoXVQLP+GhAl38\nIBhdsq+1/dPOwwTBP22okYB2ZEQKtb+rngevfOT9uZV6UYHNwN0m6mk9Kest\nYobBSfA2zWhI8oB3W5mSkbG87pVBBDAHXdkU9D/jwR0wcLRjwigZotDzlU9t\nTOa6eZS6CJvHNRJBXhJWMT6GbcUvFpfBRaU76atlB0Umd1Lt/f63abFP7yID\nM5sKGT/BiM3HOiSA0zb551t1coh0vpymabnIyT63A1c65H6CZu20Eq13EeeM\nofhGKLPgAnL0rE9wijV3+xt+zZaUOKdpJvudIOHsNGnFumzot3F5FogOFHiF\nykAGyw/bONYLjQDvAYS3xqgiS6XyPVReIPFGOlT3xReHCCUMqRSTLnMc1qtf\nLAaK\r\n=Td/R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqrcucASP+B6LKNe3mKWOT3mydBYJPBUE8G3onWEsfyAIhAIrgWNIhpLj8bD5OOT8uYs2TaZM4vgzpKLP8yGPD/Jhn"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.33102bf4.0_1631060056480_0.9856082883269897"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.76c68381.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.76c68381.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.76c68381.0","@material/mwc-tab":"0.23.0-canary.76c68381.0","@material/mwc-tab-scroller":"0.23.0-canary.76c68381.0","@material/tab":"=13.0.0-canary.72464476c.0","@material/tab-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"66455113b9aece74b59241859cfad64d4519568d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/66455113b9aece74b59241859cfad64d4519568d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.76c68381.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/ShYNPmWh8dnaCU5vsPEMnOZycWMuM245/vU6z4XnnyvyXbS1vX9peixJcu2m/davqegtytmz9laPI1vKcDV/Q==","shasum":"3eab924f5237b0e3f08244dfa5c946b43cab445b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.76c68381.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhORmhCRA9TVsSAnZWagAAMr8P+wTbmCDQ6mpC8ceYmt1d\nNzVUM3DX948kw9wKf0dS052+7TkZl4gosJoeNuNfWjEqff9DV2q6kDAAnod0\nhe7Ga4CHN+qIrZFAMGO90J86+oVMg8+mWLKlEx3nKjWE6+OP5Dc1NmIFDT9h\nBJdTytApzDKUwhxbTYwgV/OuuphyZ2/ZGKqY1/DLULUB1GMVzYPRXhMVW0Ku\nJ0Y0SU4urvZn671rRIYDb4oeNchBb/HZxoYtYT003pav3e5pS1fJjEo7Mfwx\nM6w3SnHVgOujYhjRYwfnEXwYMktacrEY1YZvfciPLL80sJHsnIXhMEyKi1cX\n6+TTK/Lgly9rAvXnPGi1hikHUZ/fhp6EdI6RMOj2jWSX8PpywCCxlnSmNw0D\naeeSIvcwdGpFxC0rkJO9//q58DDlikKUKhyR2wOI6wTCkW89TKMHEfJcMwAS\nu27UHgqE3NQyfh1iLqV2xs6dArG+PxmtnvK+8kR0ilLK/dIiDho+End5P8Co\nqd7QhxFPbW2t1U+lxrXe5KI92j/hddSqNDxXYIAr39uf7tWl6uhaR7sIG2qh\n5xRWk9RmE4wMcENH9/wglKD4I0PaReQwlXSPyuioFYraiNVKphI6Wh/dRVFx\nzm6N8qpjGiHp3EC+qRYk6bw8qt72yIpUNe6kQUwO3MlZ60fD0vfyvKklxdPo\nsMYo\r\n=hUHi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEHjpU4kSLPHZrg/rbMOE3dVtSNAwRpr22ugrFnJQE1oAiEA5epmZpVXVZvFUulawT9yGyKmVfHDadopNBg0PGNpW+A="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.76c68381.0_1631132064961_0.8820835174643475"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.17d51f76.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.17d51f76.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.17d51f76.0","@material/mwc-tab":"0.23.0-canary.17d51f76.0","@material/mwc-tab-scroller":"0.23.0-canary.17d51f76.0","@material/tab":"=13.0.0-canary.72464476c.0","@material/tab-bar":"=13.0.0-canary.72464476c.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"eac5c1fc9472a1c28736c4d8e0d423e195fe5723","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/eac5c1fc9472a1c28736c4d8e0d423e195fe5723/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.17d51f76.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-/4DqSdUGV7xyKs/rvygIIyhsKF6TvdFY3Ppd1cU2LekjjoS8vrOOiwmshWIJuYrxiZhWGa20I5Mh+eG35Bk1Fw==","shasum":"ba4c93c00de3421689347208ef18e044f8a39154","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.17d51f76.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOUbECRA9TVsSAnZWagAA8DMP/2CNYTB6TWmiurYHpHx7\nyTmEOAZpDqPM6aPRD9h5Bl8EZREqVpAdbu0TOMgJ1Ss863BqTYwsrRxqSPnA\nvOIiS+ySrC9DeVgacC0z0WNFdyuh7XmzC0jqvpuFm/FvVRB5oMA1TrtBvLW6\nvx7ULJTPR6HiryJo8Y7TVNT1np4SnOtP26BYnft6TmMKImU96LC9T2n1DsDF\ns+rkkdGZURhO/8MjrRCAg+bQSE7YnWn2ThMxSOrLVZaFs5ZR/J3yGUnOkiTp\nto0alYvHpguUvFqKIbdLOXhWIC5+baKob600/Nj+Te7N+43q4kjb4IhZkNAG\nvcUKI30hO8I33gjJN+Blsi4iCd5DDAJNjF7WZQjsWMGZXB8rgtFTXl6PW4xE\nU8Ig0/TQdJPI8m5z/wJs7Sm3OGOSXrtgGM68yxbDRxe1EuJR5AUCV03O2Mj6\nK5aGuWASpD6o9XCFJ9FAD6YoXlcDNdYIU+knbT7eKWAj8//x+jSSV8OaDPHp\nW9ekZ9E2ROWVBkWxAkWghDLe6NwvnaNFmFaPC5oQFeACKuO8kGgfZ1JXlKVc\nEtxVIcKluEAoWBgRukLpoR939FRayfC/+Pqo0bFWtPzVhrVIJ4zUf+gdc0lz\n/Cg3iEd7lfOBKpFW3zbeb3kZvMo3vsJpAv/SylsYyRm/++6rO78rktKV98LO\nzDwE\r\n=v5cu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHkSg35q+cgsVwLsVCsH2trmPxz+iyOyVFEkyAdk7rpUAiAK41ssRBhzEcUYgfPJ/Ata7R3DJrfzljDHc2K+aOK41Q=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.17d51f76.0_1631143620501_0.44100557479989755"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.3fae6c2d.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.3fae6c2d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.3fae6c2d.0","@material/mwc-tab":"0.23.0-canary.3fae6c2d.0","@material/mwc-tab-scroller":"0.23.0-canary.3fae6c2d.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5647a60f5efcc7d6235a12c1bcf6c703db6d00a1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5647a60f5efcc7d6235a12c1bcf6c703db6d00a1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.3fae6c2d.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-kCMGrR5aAhGAjDt6TU6/xmFfzod+07cy2yTJ7Ech0MxiBhfaitaOJ7reJxMrnfmZU1TSwYZetpNV4yNDahkEhQ==","shasum":"cec4f72a0c1f1ca03af8efdd2c0807e9f626e300","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.3fae6c2d.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO6UCCRA9TVsSAnZWagAA0xAP/1zi5TIFk/6e+b/Nir4m\nMEryd5hECWthN33rHZqBXRcbWdgWPhnmI7cMI2oR1CXsdoX/BekZV18lfDvn\nB1LrLEZmbxC7iroHiiOFocq0y8j4L1jSt/EkiUJp+gDSnDNyx4aJSWn3gudD\nJv2B/zbTFvyhP/AKB1vCB7S/LnsVuN5OtBWQf3YvXGCzFT2RpHapbuNZ/Jwz\nV73CKW4hhAF3GrQ3ozisG+SQ/ca7/gIvzv+yYWxUV3tgvs+cumXkw/y2M9yd\nvXwSGza1zdWxF/e6CM2EkhC73IXVFhIoifUphAY9ETuaEHKf9p7Ts5lf6hJg\ntBRAc/BnoAtIFrdMeb5cVutUlVup41ZtrpziZDaQVHktlrEdWKkcaNai3w+i\nlVeEC8Pu6moRBUBHCrUDEiH66lbSwWToehdxm2AIbdps9tw3OK5WECCzvqDV\nQQCVcODN7kmPyqkPDcxaRDITRFV+gLcN+VGwZebdfUl7BcNduDQ8QhjOaIQF\nKhjoRCwfjxAPgjrroQAuPG4rmsslOIwfKcnaMVWLcDev/rIymq4AOPIN7/L4\nILEz+VT0njQTsnrwOVch134XpSoscwaLcT6i3d1w3GFNavmbxhcJXB1jquDI\n5cL6JGHGOJLezDfVkyaD+w1UQBeeIVUcEgfJ0QKQQ55PbcgLgtE713kxDroO\nKTJV\r\n=mDgB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDI5ZZrCUSoCgrIkXVxRscuwAFGvG831ioxiAJ5/oFkwgIhAMQvvvlvF7UskE56nJ4n7bAM5CpQf9H8Q7dkOm4ak7zq"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.3fae6c2d.0_1631298818810_0.542119524903008"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.f1958c4b.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.f1958c4b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.f1958c4b.0","@material/mwc-tab":"0.23.0-canary.f1958c4b.0","@material/mwc-tab-scroller":"0.23.0-canary.f1958c4b.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/e5f5a818f48eaa5a69419b7c2ef2439b4d7fc5be/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.f1958c4b.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-QSM5ey7KV4rPn5HBFeDOJMOwDwalznpHIBag1OuU8gnGbPcLgEgpNeTbfUnEr+LepFRnuGvfMPJ/x9eLFD/EvQ==","shasum":"12ffededed2907d5609cd4e4b4af1f80db27cf85","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.f1958c4b.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP6SwCRA9TVsSAnZWagAA1SUP/2ITFWNdpyQoo9Uk2JB0\nPcPIsN+WxnT58DOgUpl0X3+TN2scEKR3xhsViBoaB308K+5OUl9dCirH5hpd\nNsSLQALonVzljxz9/QRu1rtwGZj2hgqkJjwSHORteDYHV67WTlxuU8xbmQJv\nvnbJDRehrDtx1AT+XM+Uhrp15/rLGN7366NAAOSeNFpVRCyb4WsLEig81GBb\nXEh+WPjhwuVg6G5rYqRaChaYKmFlPL6CLTo6LGlj4UaKtgBDK0gZ8PZ3TFwq\nRWhRJ5ynNaJUX9Xbchc3cSxwSzIrIIAA49PYGWkjuE2xjkuU03U5g+yPmmNO\ns+tm0r8RhH7ZB3ikKLJ6baiRvGelJ6oeUkObmWCnM9gN8L0ugSsgLMA+2N6d\nA3CPp2/kQCI8nTbIi90M8yALMFDD9WxQc8lRpoQROp6jbxZEON/HOYxwUGxm\nu0ExCBKIHvspYT/DnVr4LsJ0XojDaVPo5QZuCSHTcGLZ5MmyHPoTvHIJ7u9C\nbWegGv5Ag/wkzKqfPfO02XKWjpTOwx1TwMlFGkx5oamag5HqplRyqs940SU0\nzLimNXJk5BlfnvvxjZJFMEMEZL2YeghRGjQ+FFAFh0m6VcWuDKxmoLjr8RuL\nuLwwUvEaTf4QQOwbTkUbE56Zl0zVJKth1BQsryZjZa0Q/gfRaj/DalGSZe0+\nwTSN\r\n=EVFI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6c67tr0KXik5I9bgz74MNH18svwDdysniIrSN6L1HBAIhALt6fphvH5MFhp53YG0SjcZ508jBZsP0EUVGZateDX5v"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.f1958c4b.0_1631560880653_0.8099884912032838"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0-canary.78abbd59.0":{"name":"@material/mwc-tab-bar","version":"0.23.0-canary.78abbd59.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.23.0-canary.78abbd59.0","@material/mwc-tab":"0.23.0-canary.78abbd59.0","@material/mwc-tab-scroller":"0.23.0-canary.78abbd59.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"638a51a3b3f96617a9be7f61f87afebe78d24a23","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/638a51a3b3f96617a9be7f61f87afebe78d24a23/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0-canary.78abbd59.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-E85ztSWBT6WmLP5EVi0eg8stvq90HKGiQlxNoBwIXjBt25Qp1MzH4hL861hWii5CL2vzy7Fco/bqEsm2hOUerw==","shasum":"1c7a62e647fdfa9f7d79a5369720233e04ce4b57","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0-canary.78abbd59.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8ImCRA9TVsSAnZWagAAmk0P/3ZJ8kvrWfUrEcKABvGr\nw+c9jtW+FdKJfkTf9uEFbNjKu5gPLhDN5d8ddhJJzQ2AvQkWTj/Ta6AwkAmY\nrKdyaYP4GXShhdqEVYerefzslDeb85A1iyw+KkQghYSF+GEak9tyhg9Y4byf\npWPhLXsaoY6z5X4zE6SWHyRTE/VbglhKy+bloQ5h3u01F8RvNsUFxkQKcW6i\nW2v+GoH5Qo0aPOlyB2fC97RZ2TvnDmyWruhFCQJLBQT+fTQmSzehEoZpMJOJ\nAv3szxMZENadqxXxfI+eOVAlm71vNTHyCNy29EgbR9maoTlPmfcqTZ8x2tir\ncr8NXF0vqVA3rF5gbjP3XVYm8K3dtN09jYt0UTjZMShc3WTGu9Fo94kOQE9t\ny91acg2qwMJgVuSkNlDy3JTXcv+KfvcIZhevteIRb9LDihkk9GoLqIVXVXq9\nWzGbxEmDuj8KEu4W4zEIoBTehR1EwSWboEIQD0X3RcAOOA346fHlkpoevo7o\n3qiRGeqPAW5zn5uoe4NPlBgDWVZAd93OGsuQ7omCzd6RCtcT639FiyEdWFNU\numLR3aKUupfRuC9aoxs+d41YY2kUOjnyf7iKEK2oFUXUzauJHMZOAfNzsLMF\nNDFJ7Y/APs7talcocvTa3DQ8Bnb7MWgqSH5X8PeXMJyRDsLYjTOPohyUhR9P\n199z\r\n=y56m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBZNAoaIu/JiUsr5W/ksZWc7QNdmEpEo2P06r4yHzDrYAiBMMU9rhTBj8lAsTp5x+XZ4IWSTwzuAkOf99HTfZd2NOg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.23.0-canary.78abbd59.0_1631568421856_0.20597986828002157"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.23.0":{"name":"@material/mwc-tab-bar","version":"0.23.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.23.0","@material/mwc-tab":"^0.23.0","@material/mwc-tab-scroller":"^0.23.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9830d665867dbb440855339d9181b5c323202008","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.23.0","_nodeVersion":"15.10.0","_npmVersion":"lerna/3.22.1/node@v15.10.0+x64 (darwin)","dist":{"integrity":"sha512-ZqbZSnIZVOnSEBqknlmXN+AJR2kBi34wN9hu212m8jlJzUtVbc6lHVQ2hzaAC/Hb/06wxqsQ4K7rF+oymHD1qw==","shasum":"647dd675ed1ac21e6ea608ff699e827223659ea2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.23.0.tgz","fileCount":18,"unpackedSize":45831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8Q+CRA9TVsSAnZWagAATOgP/i6CXBu492Y4PAtCj0Pe\nBRNGplpoqd5EX7TaGak1utIXarliwCSArveGeL3h61X3RlD3QKchnK/q0UIS\n4QofrbtgVwIRhJ2O6zISssE2D2h+64ztb7s88ajQUfKE006WUe1XTlktJvu7\nCmMw/IlAsXvYNpRsF+ae0fhGipndsO9fEFsP5cr9JWI8UmH6Bl827q2HTpav\nTKy1cJ7kJw9ygNqkwMvJ0FUsqDcFgeEXwyvFFa3nZjyiXQKta/TA5ZrD36/n\nxbTxZRm22QYU0KB2HGukW93ynMw0jRqxodYFyZPV8EaPjbBDGRjXsV9ruJnn\n36ta7aLV5tcOzPBpjmVd8NViRmxULJq1YjDKEYQZMkEaaomUwgRnoDNaBtr6\n5Gks79xspbB1qypnqgbPKCXaqVEENENQ3yV4Xp55J6RuI7UmLka9VzvYpaYC\ndvTEsLVpCMKFSEVQ7Nq/ZgR4DXDOVD5A4/DAR2aUnAEz1YoVS+VKa47Yihwc\n/uTVW4cIvVhauGFAnjom80UgXIKyi07ArqmIFmnJVaC0nVeuBN6xflvMtODm\no9L7sK/juep54tnlQP0SquyAjliROq7OZn+WxGtci8hTq4cGOWwGECdWHUzf\nqHezz8PUZZ9n/fYIN2qXgKUJZRQkaiGawnUDr+A9g/NeMtWxoxk6xTqc3lxy\ndrcg\r\n=l31U\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDv7HbQMHEZwLubaxOjLUdN6ioapuW/BCabCsCHqS+tcAIhAOUHEuXpRr2584zBOQQgBEFCk6VCR+riQfY6WUYjZVgM"}]},"_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-bar_0.23.0_1631568958217_0.641200027847239"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9830d665.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.9830d665.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9830d665.0","@material/mwc-tab":"0.24.0-canary.9830d665.0","@material/mwc-tab-scroller":"0.24.0-canary.9830d665.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"^2.5.1","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^1.4.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"964716e9985c1d08cbf280a6c7a4093be800c67d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/964716e9985c1d08cbf280a6c7a4093be800c67d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.9830d665.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CYoTAfEhKuTmg5RftU28YBTp3VjyRabrhLLMZCNYxnFtE1my7BgwKBJH+uZYNikYaw5sj4gSwjYsQx/9jC7klQ==","shasum":"5b5249c952ab4f678c4811febf69efe29b6d3a52","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.9830d665.0.tgz","fileCount":15,"unpackedSize":43862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP8SoCRA9TVsSAnZWagAALBsP/35v+duMYj+7kJi2bjnk\nv9GYbhpwfCx9rWOv5MDrj1H8k+9+MChBYcKimj3jSJQiiS8NSVqQUZK8LRif\nVnZdBNthg8uZVEhpjkt9kL+X4aPa29sQFph2Rpz9v4eQNqYfA6lGsD0VL5tC\ntuKGcn1q78MQ0aa+2tbRGmEQd+/pkpglg4XPIIowcl04aoBpR8mHDCVf3SC3\nCMpWAfyRT41xXvQO1Yvpgi4s9uYf7MhkMli8i2r6GpdQh8uyr9OKFnUZohVY\nKytysriO043ZtOgrU8jSG8pRJxfh8pjq3I2dU3xUO3AJ5+vlanunmZTb/CxG\nclYgBWDkALgxs+sBkjed2B4TQ0AcpxxivzjQ40IZuC5jJg8ymUfi3/eUFpeo\nGqTJ0SY/Ki7R3Prr1PU2yIE1faVUT0/E798ZfoSbuU5Nl+ohAwSa80Er9liB\nJ0LUo/D42Oy7gb1V7F2tptXlJKtl0qps6pNIUvopM5neRPoyKvT8XrgNJJ1u\n1MV0CI09z36HUvEPKVZZKDMiVb5f88aqVvPzumKWeSIYgRe8lSp2aS7V3sQ2\nMGkxrySfG3DcLBj4BKIUjgasOT93ipfumFKHan/nMwSCgCLYEy80DY4OCrZ+\n/T04kO8z/HvveRQgLH+c91wJErd65N3BKd6aN9g5G9IBOajdTRFCf1APXSKo\n9jMU\r\n=eU00\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD+OknyrWbyEIgHYJpMHLuAZgmdQDr9OcscFKk93jhfTQIhAOObjZ2KkRmXWLwLV0a0f6AOPImp+V3kkqz1ikeL7TVx"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.9830d665.0_1631569064629_0.8463717030333247"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.20e2081c.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.20e2081c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.20e2081c.0","@material/mwc-tab":"0.24.0-canary.20e2081c.0","@material/mwc-tab-scroller":"0.24.0-canary.20e2081c.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"4912005504dcbf47a4f5fee3ef7d4b37cfb48606","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/4912005504dcbf47a4f5fee3ef7d4b37cfb48606/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.20e2081c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-8zHGBEA2Ps1tn9XdIdW3bc5igCZpdkXniLbDG54nxg1gOIVBSn2VAaU4aSmXoK3ct5hOfwFZEnLveosD6NS4LQ==","shasum":"567949b5ca80e865c4a6dc3b8ef2883e7edd559b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.20e2081c.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9+jCRA9TVsSAnZWagAA2OoP/jIbKej/r2aUOezPRTCP\nnOVG7hCm0IZJnzgp9Oaa6pTgtqPgyFnxdmbllGKoWbvNfZcZAX/qvQ7Fn1o4\ns3RdA7Dv4oDyF/PapUQwHl5pAO+S7dXu+9h4Nrocive6TDUhLXu46bhObTGb\nSoF787eSi2W1Trsm14tQgTu4lKxxMMJFMDku9/cAu88Mt7kRTvbjSjSzZaZN\nn4jLZMEX5dYxettkflcUyc0hI5uBO8sPYOS4WZh04YYY46KSG06R2hmlCLrl\n1An6TFnD0qWu94rVUGsAuBycQvNbK2fHuK/1oqiFghweRKpZPLL9NpBQyld4\nET0lYTpYO8NvgcbEB/aCmJJh8XTGhooMauRoeSCESom2IXBpUV88Gr0IUoDA\nzVLG4n45+ok+JYrOby6DAsSOhubu2H9HG/7Oe8SiiZoEMt0qgtPuOwC1YgXg\nQ2pyRg6ivrmQIV015GhY1E+mPhCdKxQWy0xTfe8OGoArplEojO9IUKb4KJP2\nW+8TwJ9NsEDpnnKlXeDCnLPq8mHIolDru4UOEYK24TvTqh7ysVnOBmTaYZR6\nPTlzDvAYoheaWgjQAgr5XvUbSkR8OS02Pc3RSuLrAxTPB391u+oVttjNQj5i\nbaSxVn4oorQqXyJIGf+S9zJKpjpTp9dI1kDZaz3+CB4rYYjWJUkfoEMUENfe\nDtbS\r\n=q6n5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDqgDpyHrs6nUBwtZdRBq7N84pfqmaGfHY6L7VsqH/bwwIhALoYPbOsrdiP1mthM8M78RXprJ7lejkZ4jy7qLpCuLqM"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.20e2081c.0_1631575970904_0.8718303482227932"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.583613a9.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.583613a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.583613a9.0","@material/mwc-tab":"0.24.0-canary.583613a9.0","@material/mwc-tab-scroller":"0.24.0-canary.583613a9.0","@material/tab":"=13.0.0-canary.864798678.0","@material/tab-bar":"=13.0.0-canary.864798678.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6362ae780108c56957ae78e7b17d5a13a17b286a","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6362ae780108c56957ae78e7b17d5a13a17b286a/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.583613a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CvfNFoxkkH1cay2ZlCqvSJmhyQ4cpQXaG8b6nsnw0hRckYXfnavnKfF9ME6lEgx5Q90gEAlbGKolVE8treWM8A==","shasum":"c0a683d797afaecd0109f7d4a070fde3d406f9b9","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.583613a9.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNQdCRA9TVsSAnZWagAAENUQAJV04DpVkFdaUg5RRfnk\nnMHO806n6UxyyDHmChtsvuhvmcPGmKg2Ufj8iNRDvbPJClXlMkqPGO7+Oqq+\n3jECf+AFBf3MUc/bbLAbNZwjJ0ItsA99XfRy94vmpYfEQBqrNun+v/tBBFf8\ninNiprYa8CXYFLXDq9XYj4f757XoYUOg4wmJ+9qQaIsEBbPrJmTwLFOENKAb\n0xFrJ6OfhRHnkIKDUu7lZYQGCh8FgfXwf9YvTKCJpilWNY1Hm22yC3Av9KyC\nA17+Dib2InDNIbKuNElFtBEfyTP4xt8ZlKdQ1gNF4iKVxeX2ppj0169rrWqC\n3uIl7XFbTJDSVqOy6eqGJzvNZ09nL/h+MgAuSe9IRub+VtZv9XbjOp4uVYLA\nA4x/d7eeaIivYAIS3kQ+Gy852EbHuUtJ1RnNASlTAwQ5Y2TdZluyaTSeOCHz\nJKZIgqvYGszTcVJXiHyOLj5z1gUpVSayPw7SwzQa01+kquylo3jJ4xYs+rlE\nhMuZHgGutlRIUGSjHduUo35DBdJx2Qe08TTbTrs7zrS6qDWmCPPPAh9dfAF+\nlqe7IWtPnfO2b8XYdGpCE7mh/P7hAHaHHZ/NLRWSS3Kf1tqvs7CHCg/RVX2G\n66FhrmssPtKsqbaTNZqUqgWB0u43Wi2u02HSXop6NXzKdpu6aRfFjH7/AXf9\n0ENx\r\n=P7Q7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDeAXAJn04pNKK1XcOeRFIbwTxiKSk5dIPK6xhS7a842gIhAOH6mcFVouw/nzEjEqlrtMyR23nYrYwrwJqk21Tc6YJX"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.583613a9.0_1631638557428_0.5873920556950176"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.0e1bd56f.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.0e1bd56f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.0e1bd56f.0","@material/mwc-tab":"0.24.0-canary.0e1bd56f.0","@material/mwc-tab-scroller":"0.24.0-canary.0e1bd56f.0","@material/tab":"=13.0.0-canary.08398f880.0","@material/tab-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0ac1a8621875726916642015e273dc177d29abc9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0ac1a8621875726916642015e273dc177d29abc9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.0e1bd56f.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-5IPHrH0RBimf698oGd1j7W8jJaObuDwEjT9/BTYBp75IEaYpYEyRJzTjZk6qa3okeORCij93ReeNAxCZ8rwJ7g==","shasum":"d298ec0a1f0da89b51fd683d6160276b20d2e252","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.0e1bd56f.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQNzLCRA9TVsSAnZWagAAewoP/08NpA8l1K9TppXDhsiS\nN5nAHtJrA0SRtnVnCzkYQ8DbwTs57noxSQpTl7Ax3J4TfHlbTrrlgNUNt5y7\ntKx/bG4zgr5X63Z1jGHvMZYp6nocGsokOHeyOrqf83k9JGUFSMCWWlwRc5Vo\nlhuT3fz0kfF7GXA1eT/2iZ05zce8LRn0o3dmK0Z3pMYhvhj+Q2VjxPReFJXk\nY02Yk4feoUEFyJ13kgaQ+YxIkWfd96TX6rjGtNbRGmgiavgYr9/QYIHrjJPm\nT8lDnbT2COJKO435mWrvfDRyn0BbFdYX+pficX4O+w3Af5fJbd8Gca17FtI5\nHor16gipfGKaPrXtfAXQIzfG45AVEjx0+4yqjAI3itFJDo1NJNyGR0jeNAJA\ne7e82j6CcfXb9F69oSaX222bC6/ia3S8w1bfdYdyrGsBBsb48M1I4ARkKW/u\nGQLqp33A5jXwFYFrfelrXbA3kGYW/JAYytAUZFmOlnX8a4b3F7qBDSoknR5U\noAmVtq0jCAbRfHxDQvGEcOES8szVvRUzZo6CQxGitcGv89M3DhZR6cnLdGuT\nK0Rey9Zkx7Q3CQAg2LmY0gtdWLE6UpUxceZuJrEv/HQ/AKSi1A49vhilbgdz\nYrU5kxI6vrbhZ5SsbtZG4+peN5UA3V+HmeSw5rMDU2wufiGY6l6etLCCgBkl\nRiw3\r\n=Zsx2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICYZT1AO4F/Dw0IAr1oxN3+O3V6LocqCB9XXtyN3jLYpAiEA6mVeVPkloRveENjW0tuu8VDnFEtsb/ZdYoSk5QJy+Ik="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.0e1bd56f.0_1631640779554_0.6002075009000365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.7bb1818e.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.7bb1818e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.7bb1818e.0","@material/mwc-tab":"0.24.0-canary.7bb1818e.0","@material/mwc-tab-scroller":"0.24.0-canary.7bb1818e.0","@material/tab":"=13.0.0-canary.08398f880.0","@material/tab-bar":"=13.0.0-canary.08398f880.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b34bf652f1b82b80ec01a0ffcec5dbb2dc950485","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b34bf652f1b82b80ec01a0ffcec5dbb2dc950485/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.7bb1818e.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-ygEJS8ebLYURQdAibZm6NhDqkRxebN8Pu6A/EoPXrwqR1UZ1ecsa7W0jxYHpCh8Z3oOysU3uUUhGks8LJLzDsw==","shasum":"7bf78b64546adf08e3e2b9e398f603acf24a8c3a","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.7bb1818e.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQUASCRA9TVsSAnZWagAAsOEP/jdOMsnTlJje6y5lVTYW\ncUzE66Gk+FRKgbV1JkRrv5GuH59Ay2lw7sx0sE9YdsfMEvQoaNRqTkleAve5\nTo2CY4DpAUoY9q4y5Cw7tfMQLzd/sekMm55RKDtgoPZmI8X5dI85MXZOKQZ5\nnu2h8sVZZqvwGkoH+4hHWCcoAjfRmBC6UtTp0q2HVzTPlGNAVDL/gcHZhBJp\ntQLBzmD0OBtR94h/iaLgfz8Ajz/wP47lpCJGhhlwNvqyALXR7YlQhwJzSH35\nxXqiDvYZR8RHzAob85Pwvk6YdOEw4NuFuUS3UXG4FpAUv0koZE/9yD1vdn0l\nSTSH205KeQFlXAP3lE1ZmeuoEhWTyOjdPAa5dVrqN14EcyVLmNEdBwmoagS7\n9yRM+epezVSi0YDdRVVilZvHW6pccnZwy2PFkRXnPaYFu3Vq3CWh82VHrSb6\n8SyFWQ3+bIL7sC06snjkSadcyIKkU7ePlah80NiaL5rKGtJuTahb6N7aouKB\nowfX895O5XuIleYp5Cm1Fb372qTRHu0xvrX2oWdo/fvMWkYIt2fdTc3+wzD+\nrsFfOsNvL4JkrICKAFvgfpyjUM5fp4H5XBStW4ZGcXjdTPTsfzi9aZNRZnPe\nr9ANedWKInILyBljsARKLIj1Zsk3z6Hf7vZJj/RrtjUBD15WQyEcz30WVDYI\nIrgL\r\n=Xh5N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGIBUAuabJAPrBzDkPYlhUxY9cgdmj4MNzVQpxjnKEq7AiEAvX5Kpem3LOsnG1kC+712FlsktEFE7A5ESUvDd6IC2G4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.7bb1818e.0_1631666194542_0.5993462326476706"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.b5e665a9.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.b5e665a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.b5e665a9.0","@material/mwc-tab":"0.24.0-canary.b5e665a9.0","@material/mwc-tab-scroller":"0.24.0-canary.b5e665a9.0","@material/tab":"=13.0.0-canary.818f4ee93.0","@material/tab-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1098b7010fbefe404afd06dfc30b7b30db59b092","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/1098b7010fbefe404afd06dfc30b7b30db59b092/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.b5e665a9.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-1VQtOeGQ2wAzLnvHtPspoNsb69leGloqxHmk63KkAJecvWmUjmx6ID4kyvRq7aJZDxA2vAZ55glyvu839lzDNg==","shasum":"e975697d06f0f2344a004d2fc7d6df6fcbf12309","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.b5e665a9.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjffCRA9TVsSAnZWagAAvUkP/RW9cHqExNEMXpZbamBO\nJomECXU3VWKpM8OBzGXfB8MXWPibkx4u6cj8FTA8pjzR/8VAwz+F12i+vG7L\n4RHrNoa2N0mzb93QqJ2EuzKQjzjCXc8pcHlf7ucvZxH7qBBd6I6C8+Ur/IaZ\nWSx4on+cfzholEXxThA0vBdZn0j1Qda4nPfO87fvz84bEJ1aZmb2qjtpanlN\nnEK9Q06Q8FOPki+8t0kKANu3NwYHlKgec0xeHX9/E2ZSsATrScI1aVepTlt5\nCv+lGL1uRwU2aPwjhVMzWAPrgqL9CB03Kweyj30pYoEOuXOIYYp7A+1nK2mj\n3tUTucqXLFHvHzwkJ3YYbO1kZVhYbjcqdXVQQRf3/SU2PWw4htCtCv2GHYYt\nrN1h/ZFBIwix9oNhInpFyxHx9ACXoFsALEEQ5Do1Z8Q0Ln1ZTh2g5KRDTyu0\nV4xVqq5cwb6ijWVYd/kcQVk2Ne+6cee1FnPaeq/V6H683QGXNH0kFKkvk/mu\nIBr4dhUIzIbZOOn4FcLImNsyzlNw7rwWobW4KCbyX0dG2dFA5WWvqk8o+2NC\n54rvA8Jsz4b0eNSidgSdkKtBHg8o5El5MysWeLzbwOZNqcJqlsHiZux2NE+5\ngulwgXjp2p5Gt1EVaPjFdb3TtcRlDIzQNbEtFkmo3lD9WsCkPxA4UC7r70jK\nz5T0\r\n=G3gJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGM4FCr5dxaOP2ibujVilklzxwep8bVoNWBlT6BPUIBNAiBoQ54br4GKLg3ley0gzJVtr3EwI+fK6dwH8SLrVewQCg=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.b5e665a9.0_1631729631124_0.6472186427926527"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.ab1e177c.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.ab1e177c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.ab1e177c.0","@material/mwc-tab":"0.24.0-canary.ab1e177c.0","@material/mwc-tab-scroller":"0.24.0-canary.ab1e177c.0","@material/tab":"=13.0.0-canary.818f4ee93.0","@material/tab-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"afc26bf1f2c64cbe713e03a55993e7844eac59b4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/afc26bf1f2c64cbe713e03a55993e7844eac59b4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.ab1e177c.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uEDZHtw9GDkUgH6wxJYz5GReB/iqvcof1YZ3aiFBROzVh9UaNjaH5Vxn9318gYvs8RIEwCoXOWtyTH2oxHCtog==","shasum":"712063d61fe1c6484ee78fbbfa7b599309f3e639","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.ab1e177c.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQj9OCRA9TVsSAnZWagAADHcQAJL1VpLzuPSDj/O3pduc\nBJQYg2LIxUOKtW/3VBY2Wxcts1CjcHqMqdHjbrtC43X4/LXZG87f/emz3MFL\nz/hUhiA+GzY5U4KUOtcGpnP2Oa51MCcSb9FY721uHMQaSG45NghWjXTnjNvF\nTqZH5yfUgvLakuZz0rHjsiDpVVQc4tKVcxspiuI03VQmm+Ju3AiQnFqILKcq\n4YlHq2SX971idYTTRFTNB8sTgbnV9t07Fq5Rz2xxDmp+4fR7GG5BZhN/SsuY\n7Ky7wiP+gT6/iifCu3LhEkYcF4pRUmGdLlMgQtqjBTnzNVwUjzTEfLo2INcZ\n8Nem/7cEzLBFl9NVEaXnWj+Zk13uVvgTFTpQnYe6D/s0hp25m9B9RCTmszNw\nWBCRH7NgkGBybfH/XM3AgocvCoufX7Fg3B0JySs9F3vO0M+/oz0NT5KJn07c\nBaIkxrg+jo3iUFlJX+0a1x8k+iLYL0XafoePNoqTc9e39OWUG319BWfmH4Cc\n3wBiDMA78+Vvu6T9oDUi9SoUkWJMwsizn9ukG7pyqiRsFo2F2G+Wx887Ohld\n8AHzNq9dHpkACt2zbsuzfzBoPRpHpK5uK/wusGaVRJdkDuNTdAEuULyzVdKY\nLbY6VxMFRo6E1SzCOf9gVozbjWgK0MP6ZScAo/Xc2FcbeOWfGTsbZb8hvEOb\nqcpz\r\n=j4Fj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDbP4ciydzrgPtGUolnplefLlJRBcQNguq9qqNUgLHNtAiEAg0hLKj9AO3RoGH4Q55h+C6rFZGoWoCde8mFphe3knng="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.ab1e177c.0_1631731534069_0.14465022631900148"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.8dff8894.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.8dff8894.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.8dff8894.0","@material/mwc-tab":"0.24.0-canary.8dff8894.0","@material/mwc-tab-scroller":"0.24.0-canary.8dff8894.0","@material/tab":"=13.0.0-canary.818f4ee93.0","@material/tab-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"bb2f0724a85956f5a92c61a18390b4616e0ce836","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/bb2f0724a85956f5a92c61a18390b4616e0ce836/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.8dff8894.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-uXyx57AHKX96n5HHyjkJ+5vx7MopKSWRvUVwEghxiUVGixFAmOdPflLRRXlB9xKhOFAIJapJIVE5jjUiEfGBCA==","shasum":"c71ecabe62ea0771a2518bc15b0a2c2ae830cb4e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.8dff8894.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkTcCRA9TVsSAnZWagAARZIP/jHZ4DgqCmdfKMa2VsCk\nksVQXWw4t8xdWQuy9r8luwB6xfTuRj1taTVctqr9j7IEKl4Os+U6Bw4DCbhq\nQqi1ZanUkP3EoEC0mt4GWodspF4ZGPP2OfY/csQev4XWFVbigklJ1vZNSzyz\nSpGk8kybvmdZWKrOeMVOg9Jr29/2Tv71uVl4Zfjxbyl6EFC0oJWK6PIMzev0\n8hozixvFuATIEmoo6S5PgXhHc2ESVWel3g8uBq+Cpo4KvdzbocENpi/UlIwU\nbaCKEmSf2ZdryfL38/XSvmjf8/5KBDKdcnwOmFCJKozcF5whIHV5rCLCp+ez\nBO4vKZ8wMo84WikK6XQSlq432ExWs6WZt295h87CgWo7dgMeiiaNSWqaJiTo\n22Zlpwy7EGAkS6Xj/ShDUW6OMSLBj3tdxU6Aat4+bC7aWQe8rGMfIobdlyhf\nHPIgNuuPI5utyaWe86KhUDCkrSs3+RSmRq4LoQieq1tIUyYWzHqDSN0NtJsb\nKBF6tjbv6C3nwN+yTaP+4hiLZjq/2COsr542vxSfnXpy9g+IWDaaJqgLcYc6\na6Ec5WfeIoi2C8Aj7RdqN/gXXrnje2W/2/j5kZoZThC8OH5TU3t/WvSw+nzr\nZY2BAR8mtHIgTApIJF/D8q7czx1GhGQN652C5jzp/UoYk4DePObLHJ6Ab7xk\nJbFW\r\n=8T2c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCfxXG8h15teUGszc4A/9o1YZMigSu5PFwYecZL821dIgIhAKMW+IYA24My016RpK+VzxxHy7hMG43nc2t6pMC7K2rd"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.8dff8894.0_1631732955905_0.22373178386948633"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.9cd7e927.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.9cd7e927.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.9cd7e927.0","@material/mwc-tab":"0.24.0-canary.9cd7e927.0","@material/mwc-tab-scroller":"0.24.0-canary.9cd7e927.0","@material/tab":"=13.0.0-canary.818f4ee93.0","@material/tab-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cdc8741747c55134790f2334cd48c000ef607804","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cdc8741747c55134790f2334cd48c000ef607804/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.9cd7e927.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-CGVJMFU8DCHRWEriRs+M+aeeqUFXUMBxrT69xke2pOQaP03mnS7/HPLccdvgRcWb3A5DuEzYqNU+0j4+7adSxw==","shasum":"5f9618e6a873d62d221b9d075003967e0a37fd69","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.9cd7e927.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQlh0CRA9TVsSAnZWagAA+LUP/Ao3oU5GI5tXI+qtrBSg\nrJLgFwDPxW1gPRz/o6eO+UyvdwVNfxo1nrYWXDS8oC5lrlbk7WQ+gJE/41gj\ndrSALmb9grY7D0ClcaW4ta3HGkla7oKgiVTOESVCBi9qgFHxboe3sWUFE97j\nsnHTLSoaOZ7GGK7SQFV5gzddbqRV4IisEeJqfWkr0NDeOjrYZ0vZ8KAdmd9f\nu5JTp4e8XJC9HSXzKGQP4m5mVHAzcDkg2vhhpH5651S4dbVFr5iHUH6kQMnx\nPYIlJOd2ZOT90i6la0I8JMmvxXi3spia44mwst3Mdj8n5JRn8czuyH3rw9lE\nA58RIe30LkdOQ7smrlicqMgshFxi4fdjKWK0nfpmkUv+qh0iiLSO2VJ/0vRs\n3sVBK5NzC/0G4nptdPp/zgJUvYx2nXaf86Du2MlLJjLtWSUW/QBHhnDxb/Fz\na8E6q8c9LxSa2X9QRS6G/E4tx2YY/ivKLBku+I9j6m5jhdMTYgoHpMb9L6NB\nDfOrNBrt/1H0x64cuNtyyZERw8PIXfz2TTvbQjdPgwaK++mk+26+V+PoMlhQ\n/ruMiKDg+PBYVxfYuGoXaSqXX/ykQ2SuVXae8OccJrAwlcThNeCV72x3U2hK\nLNXL/lE0n944O2zZQMQvvn+c6ZbTSPhGVV/mWsmVUWwNbraXbmtb9NDkhRZm\na7SR\r\n=Tv3K\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDHFXUb+ioZS5BzjEjYxq36XhLlhy7bD8mWVsv1e/CZJAiEAiVtJ7fKCXhFVJD2DreWkWbGtPud73CqS0+Ls82ncnDs="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.9cd7e927.0_1631737972765_0.0012119003655677307"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.a7132082.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.a7132082.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.a7132082.0","@material/mwc-tab":"0.24.0-canary.a7132082.0","@material/mwc-tab-scroller":"0.24.0-canary.a7132082.0","@material/tab":"=13.0.0-canary.818f4ee93.0","@material/tab-bar":"=13.0.0-canary.818f4ee93.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"efa498c7c84be94afa4d7c50d5bc525723212e88","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/efa498c7c84be94afa4d7c50d5bc525723212e88/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.a7132082.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-lNNsIJiCEOSr/YyReav0IoMso9vRUv5yjiKI7boChT3Gzho9AxapCyNFnMt1RdA8c3WkY834we8uyol0Hr10lg==","shasum":"48d2417de5c04051c00801f744faff13b36651b2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.a7132082.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmmxCRA9TVsSAnZWagAAlwoP/jBgo86hCDHUZimhJ0b3\nYsYqA302H3klqMqJl3m8EF4Is6+GXtD+qdfJahzVhS63d0Uq3HzCZ37MqdAp\nXCHbdpBsrGa/V5Z39MTWIzKnmiH7DOS/j0ROkCwZ7j98EqRI3uH9ToW9oT74\nm06iUMWgxF9scxgzviytGBfoz2yEx0RzaytOayf367/QJAoYwd3ntONVYeex\nnmOGOOQ68kmNNnbjofdpKglqvOSAGWFjoBEK28ZyNDQEY8U7WuYrBGlM4pOp\n/9BQjsy5JOSW7R55GMBvJ0i6sjU2YsnAOt36XAbWKB+7TsDdqX4g8Uwo6n98\n+2ab6JkR1RDonxpXLXporxWZEjLwPF3wxqPzOzQJTguBYs+JYHcoos0boH1s\nXdCc5GgK1FJHf7lY1DtqXXAb2IRhqyrNpniBDvSqwFtlp5mPqbOtPzv08dks\nbAXvf+Hq5MU6MJdtcN+W0EF4PeVPZG7sPz5OrCZfK1gNf6GdPZqfWze21IfY\n18yJFFOyWwCC1PwIYNyjdatZwvniar6IUllRkZctSRJ+pD+s3zcltKDZPPgv\nH0tA7SkQ+IYAf8i2aqPufUji95ilTiqpFjiBQysnDN7cxpCkWwlP9dIREaWH\nb/3KYGCEJ0H8p0/i5SHISxQzvcEbn/AROHHz9RC7HkAJ+pqbO48IGoUHfb1u\nREYy\r\n=bZIG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICzZi/JuHSoDDIFeLBBl3tLRRXZAqpsNpVkx/VAV0S7zAiEA4+G6HJFR1eG1KndH7ghIH6Ox+hsZN2XetPifETKqnBg="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.a7132082.0_1631742385468_0.3462004963676113"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.cd9110cd.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.cd9110cd.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.cd9110cd.0","@material/mwc-tab":"0.24.0-canary.cd9110cd.0","@material/mwc-tab-scroller":"0.24.0-canary.cd9110cd.0","@material/tab":"=13.0.0-canary.d4e16a6c4.0","@material/tab-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"fe7dab0d93d6598d6a6c08de182cb7e3245f26b4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/fe7dab0d93d6598d6a6c08de182cb7e3245f26b4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.cd9110cd.0","_nodeVersion":"10.24.1","_npmVersion":"lerna/3.22.1/node@v10.24.1+x64 (linux)","dist":{"integrity":"sha512-J/rMDUawxw1sULMfnLY4qYPx1FoOIHQPOheQDjCJOBjd1nIuf5AgSnyk6zZJqU4tfroGd5E1zkK9N6WzORrBTA==","shasum":"b0716748dbeb52ade89745b2dd16dd157997a5c4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.cd9110cd.0.tgz","fileCount":15,"unpackedSize":43870,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ4LnCRA9TVsSAnZWagAAcBQP/3lktO5AyYqRlMtVDzeB\nX+TCiur15w9jodntI56eaeKmg0XwwFNKiPLnNn6g80YM+G9lOvlFEiHNTUd8\noNNx6/pXrJt/gXW7NowD0hDDzYGDzHJjuB7nPgaFcCZVSPJ1mFGMA2gnIW3j\nKmKZIi6AccED2yA1fvjHHVF82g72SpLr8PSWRGxtoHDSEZlj7U/ZnliHN/hl\nCO8aIws+PmMShc0u0iCj+dlcyXIvs1SXHOeya8GSvCqv2qKdHwcD23Latga4\nzzwMfaRBNojuATr7a0L5SF1YcsairIfS6PjsL+l0DfSJcBQuCGhWsjU7rz22\nuhuNMZkk/fY2uJiNm37Fi5eFz8d7esgVRuFyKNrZV96NXIhmob6kDaVGq67h\nsGR9EZBM2hpzmdVLCxJ/pMJxGILg51ydAoOL5P3Afxs8FdeRHl+P3nE816+b\nqkPpRSKQY5wFX8QGkbHq6BFnCOUaEg58BTBG80CT+sPIduH4bTyVij7W4nGf\naNEnS+IpCnG9sH+pnCuOssDRpZTjLXvyjznGpUUBnCYdENlpuxZiPZpkOKzl\nwR1X1YO8QqmlI1tPSFc1ZeEVhdiCer6gTZIa8lwsP4maklVuxE6p95kGhJl5\n92xQi4FCemxHrMi8+07QrwUOlVF/15+5vkSmelPpb8XA3aq8yoAxRKAMukxT\n6lul\r\n=a1gy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE7F073nj2gGWJd37nDyE4ptKv6xwt8sNNnCOpySmHfNAiEAgDPQk//dOmr2pGHAlLTgpa9CKClxzWUMQERVjc2bi+s="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.cd9110cd.0_1631814375678_0.21073963388650374"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1e5a9883.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.1e5a9883.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1e5a9883.0","@material/mwc-tab":"0.24.0-canary.1e5a9883.0","@material/mwc-tab-scroller":"0.24.0-canary.1e5a9883.0","@material/tab":"=13.0.0-canary.d4e16a6c4.0","@material/tab-bar":"=13.0.0-canary.d4e16a6c4.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5b1cd8120da2d6449203e71bb01079f709aa19bd","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5b1cd8120da2d6449203e71bb01079f709aa19bd/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.1e5a9883.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-sYggwOUXhb5HIxMvDLqWKez+ZluxzUQ5UnBzhAAluQ2OAuyJbB5ECc3gVB2h3qMdXqpU52uwqyoZu2KSIgr7hg==","shasum":"806e6ae944a28b4bd7e268b8471e861d26af8811","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.1e5a9883.0.tgz","fileCount":15,"unpackedSize":43870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCs9HLzlRBXeV8e7Vi6OeGfdeszJy/KuwM3jPIbfubfeAIgWPnMYjvzqaAVNHDuH/1s4eHRfWam0+SQ8yxXBbbh6JQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.1e5a9883.0_1631911171740_0.901063901641481"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.32c830ee.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.32c830ee.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.32c830ee.0","@material/mwc-tab":"0.24.0-canary.32c830ee.0","@material/mwc-tab-scroller":"0.24.0-canary.32c830ee.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"72f380d7ef6cb00e8a03c42048cbf0cc09820ae9","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/72f380d7ef6cb00e8a03c42048cbf0cc09820ae9/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.32c830ee.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-Tdqbhq4MSlNazj8Bn6KJBCgqM4N79eegD813lhiyhO6Nvk+LSf/l6Pz/pirUwRqJaNEfk5dFp3iTvHZ1OoMyxg==","shasum":"8a2a511dd3d73f22835f6d94b6da30f350299c18","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.32c830ee.0.tgz","fileCount":15,"unpackedSize":43870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwhD2mUpbFUk8zWBz1z4At0Hb3PQ+IC/mNXlS6Aas30AiEAqzZRUaGnp9Q0YwjoPTky4AD+FCqwWMJO8ppWpEWmnsQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.32c830ee.0_1631920151663_0.06857773669406497"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.1de87bb7.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.1de87bb7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.1de87bb7.0","@material/mwc-tab":"0.24.0-canary.1de87bb7.0","@material/mwc-tab-scroller":"0.24.0-canary.1de87bb7.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a3215ff82b8bd0ba323b98cc29ed77fca57b8643","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a3215ff82b8bd0ba323b98cc29ed77fca57b8643/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.1de87bb7.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-0N/BTR9Q2zGhgHnsjjuJN6fi1u8s7iOsJs5lAshAH5vgifJ/zZN6f1BJFqjMykvsUkZG+H/9IM0VI5/bRT6Y0w==","shasum":"2e74a1c1fe42c04634206dc6a258bee883ff65dc","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.1de87bb7.0.tgz","fileCount":15,"unpackedSize":43870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCzs9fsMcbRW/aU3EZYzajXC+5S3ubnAkBhI87RALQmuQIhAMN/9jx0hq4HLgrnGLLsSBRjUdz3cIv+v3tx0T99BZ8f"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.1de87bb7.0_1631991154136_0.49031988048971575"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.f2ea80c4.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.f2ea80c4.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.f2ea80c4.0","@material/mwc-tab":"0.24.0-canary.f2ea80c4.0","@material/mwc-tab-scroller":"0.24.0-canary.f2ea80c4.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"be75dd39a03705b3cc24c5614f2c7f2be7c3c93e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/be75dd39a03705b3cc24c5614f2c7f2be7c3c93e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.f2ea80c4.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-A9V2KV+sVU1AZ1rq53l1HESZAl5a+7TMjIaGRN54d/tvACIiLD3zU1k13OlNyBiAj0XNmwN4PPOZjBDZXuxeKw==","shasum":"5cb6ac5df5be08c8527a6f3afa36a83b2eaa5a69","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.f2ea80c4.0.tgz","fileCount":15,"unpackedSize":43870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd50vodvDGZvzSKRr6Rw+WpPPuL7xEMJVCsaWUlICrLQIhAKJbJkcaeHrT0MdVLz0HXQa3C0wmkMQTVEDKg3it9iVr"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.f2ea80c4.0_1632160519802_0.1151486257191856"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.569d739f.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.569d739f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.569d739f.0","@material/mwc-tab":"0.24.0-canary.569d739f.0","@material/mwc-tab-scroller":"0.24.0-canary.569d739f.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"3.0.0-rc.4","tslib":"^2.0.1"},"devDependencies":{"lit-html":"2.0.0-rc.5"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c2e841aead340c043b080dc4718873a82f109450","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c2e841aead340c043b080dc4718873a82f109450/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.569d739f.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-FNIJKQoH4eXmSFXpeeFQB2SBCAlGh4won7E01vMmm6zCYNCcVH+6jYLgI/2ZzmEoii02LvBkpz3Zq1YFF4odVg==","shasum":"d1df24d250bdb386e5ef10c23c9b17de462eb82f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.569d739f.0.tgz","fileCount":15,"unpackedSize":43870,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID8gKefe5FW7l4UQcGFTdXACIYKKN1+VlK4ol3Wdl/dOAiAE4vCETuLIA6kYbaxTK9arO6hpAcgKUfbW7PMTllLKEw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.569d739f.0_1632173059793_0.9600711522672674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.24.0-canary.5a434a50.0":{"name":"@material/mwc-tab-bar","version":"0.24.0-canary.5a434a50.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.24.0-canary.5a434a50.0","@material/mwc-tab":"0.24.0-canary.5a434a50.0","@material/mwc-tab-scroller":"0.24.0-canary.5a434a50.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7f2821932d60f65ba8b79446374be9a66f009858","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7f2821932d60f65ba8b79446374be9a66f009858/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.24.0-canary.5a434a50.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-QwY/R9wzHTC86P5D8q5ytY9tCvLNCTS1Z99g+0ZeASDEtdpZoNBI6ilLzw08ngngjzNZBs7cW2mvpPCirC98Jw==","shasum":"de67b7ac17b454b34268cc46c6ec68d62dbe5870","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.24.0-canary.5a434a50.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCH2ImjmCc/HgtgzVSMNjAjD81NbnoVHCtKaOKuVMZ4AcCIBKTtATM9Fs3nZPfIxJlE1E6aA/PDjIGSytqDg5GEzEC"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.24.0-canary.5a434a50.0_1632189676992_0.2809956109382832"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b1c1ab52.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.b1c1ab52.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b1c1ab52.0","@material/mwc-tab":"0.26.0-canary.b1c1ab52.0","@material/mwc-tab-scroller":"0.26.0-canary.b1c1ab52.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"320a093b73bd45cc5fa68abda305913c26c72310","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/320a093b73bd45cc5fa68abda305913c26c72310/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.b1c1ab52.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-7X6r8ORCLSOTsgiJD4GnNXTZjyg7DyjkHFgDbg2b0CtLvLnfB7qmBuAn09zhsEVGZ3Gc/JpFzvzMNBM/knTtVg==","shasum":"8367fa27963a63f0ae0ae2095ed065d61cbd11ed","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.b1c1ab52.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCnVCn/CjE1O+OFCSJWdMnd3nFfwkk2JboPNfbGpeN1fwIgcuC4KOjz0vdQyMCCIVfmQoLgRBDUiAc5aOE/txtepWw="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.b1c1ab52.0_1632193955923_0.8684029139207348"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.1":{"name":"@material/mwc-tab-bar","version":"0.25.1","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.1","@material/mwc-tab":"^0.25.1","@material/mwc-tab-scroller":"^0.25.1","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b1c1ab5230f56f6bce405387b9c75cc7111cacc2","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.25.1","_nodeVersion":"16.9.1","_npmVersion":"lerna/3.22.1/node@v16.9.1+x64 (darwin)","dist":{"integrity":"sha512-syTeInENhRIx40bb4YVcaiIxhKQeHEuN1KraIlipvFvU+ErIp4PZ00VuBVjj50ZLmMyxTdUqygr496VSSlodMQ==","shasum":"8ba4de4bdabd57cf1870f1a42c48c97ca850fa7e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.25.1.tgz","fileCount":18,"unpackedSize":45831,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN3K7XdlqiZ2LmHW5+g6VaPtzTN4W8sKDvBp5oOmeEuAIgcZWPxkgLuU+iKORR3+5ryvzom3jHTwTQWRk2TJAaMyc="}]},"_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-bar_0.25.1_1632193968873_0.8598068257556313"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ae060177.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.ae060177.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ae060177.0","@material/mwc-tab":"0.26.0-canary.ae060177.0","@material/mwc-tab-scroller":"0.26.0-canary.ae060177.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b919ae5340a9ffc926d328999cc5fe5704922e40","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b919ae5340a9ffc926d328999cc5fe5704922e40/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.ae060177.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-dxIRjlftOburAkaWrZUyuo770VKQ3AtEVxBWdWWTw7igjz5jdSoNYUWc4t9Hy/diL4ZfBAoNf3oLpUycryNnHQ==","shasum":"1fa21ef3dabd504ce38140654351c8a452eae77b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.ae060177.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxyqwSzqxekXvLAzrAcGlvQ9eqZTsPOvxLeUQxNrCdKAIgXBCyaULObCIevkCT6h6fIpsNjrUv2QqSQ9PuBu/7Jmk="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.ae060177.0_1632235113723_0.23602887545391416"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b6fe2a12.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.b6fe2a12.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b6fe2a12.0","@material/mwc-tab":"0.26.0-canary.b6fe2a12.0","@material/mwc-tab-scroller":"0.26.0-canary.b6fe2a12.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"06feede8e75d655952f3a43b5c971276c26fe92e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/06feede8e75d655952f3a43b5c971276c26fe92e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.b6fe2a12.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-pTLz5TsG8UUFnJ1dNXQ6Cl19he5JmxosYq81mzxYnWPvqTrfwI4cp4lV0vds8Q8t/6u1uB3QspNnGehsTe96sA==","shasum":"d9b33759a7d152ffbfe6771792f19ce620b5a436","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.b6fe2a12.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEYzmReiR17DG8BIIrkyr+oQPcyzHmtHFZWQpQcrzh+YAiEAycyeQLLI3qQHye7nZVZ1KtIgBnBPCP/KxWQ65fHkEP0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.b6fe2a12.0_1632341803220_0.8611703059766751"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.07e91417.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.07e91417.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.07e91417.0","@material/mwc-tab":"0.26.0-canary.07e91417.0","@material/mwc-tab-scroller":"0.26.0-canary.07e91417.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9fcacc1890992ebd650dca508478ea3a276a1ebe","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9fcacc1890992ebd650dca508478ea3a276a1ebe/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.07e91417.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-RR/3MfMn7SjnRLgd8LrTEPe5MaPI8EPu3ch59dmLFGXfb7nFC0fdE011/VYPUE/D3oPQcRHP+aMOzOh/CoYvEg==","shasum":"516f8ada92b1ace1baabcaefd51b91ffd2afe263","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.07e91417.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC6WSykXsbjKorLWTTq8IOJMH6BHetaGEUdLAB2Ws1HGAIhAIGoyDhR6WMgXYrXfujjA/Wm+Y60viM+fQoZJeRz/6B5"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.07e91417.0_1632344774424_0.3375034058249766"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e2203ffa.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.e2203ffa.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e2203ffa.0","@material/mwc-tab":"0.26.0-canary.e2203ffa.0","@material/mwc-tab-scroller":"0.26.0-canary.e2203ffa.0","@material/tab":"=13.0.0-canary.65125b3a6.0","@material/tab-bar":"=13.0.0-canary.65125b3a6.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"dccbe3e93b2694b3336adcf33188115ced04a52e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/dccbe3e93b2694b3336adcf33188115ced04a52e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.e2203ffa.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-u1UpBeA7GH24OqBV8vJ8/0XJWVPmK/2Mh16gVMdnkb9R3aFGET2/PzF9MCqE4noytBy4v3c0HN6lmXCToCrJjg==","shasum":"9c2399c5708cbd6f2b4f297a0cf4d6e74d5b0dad","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.e2203ffa.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGO2Magnu+uGpzA6Nuaiyh2mjim4ck3c2+h3gdRGtHf8AiBVRPOW5rTYLP0IWuYXKspjU4YKCdW6HMb1//AckIAC+A=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.e2203ffa.0_1632421683943_0.7363838916414109"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.4abe237e.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.4abe237e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.4abe237e.0","@material/mwc-tab":"0.26.0-canary.4abe237e.0","@material/mwc-tab-scroller":"0.26.0-canary.4abe237e.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","@material/tab-bar":"=13.0.0-canary.c79aa0cdd.0","lit-element":"^3.0.0","tslib":"^2.0.1"},"devDependencies":{"lit-html":"^2.0.0"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c0c828f0240aea9472d319d4a1bb77871c960873","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c0c828f0240aea9472d319d4a1bb77871c960873/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.4abe237e.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-YqDpiJK+jQBA+DilVQOzALQgBWYDL4jX0wADBx5AohYT4V5shjPWcvDssoWT5Curj7Blsvdbs0hiU5sKvuUASw==","shasum":"6345a3302bdd1f2bad34229f1c82adc7ed62fbc2","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.4abe237e.0.tgz","fileCount":15,"unpackedSize":43862,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC4GgXKmGiiY23i1vwGjpNz5K6b6dgWv0aBr6kJQv5N7gIhAJ3g7QeDbbNYS9L/7tOB8nON10T3gKHmzI8CZdeTTHEW"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.4abe237e.0_1632504694327_0.5414541743769596"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.6278ee5d.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.6278ee5d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.6278ee5d.0","@material/mwc-tab":"0.26.0-canary.6278ee5d.0","@material/mwc-tab-scroller":"0.26.0-canary.6278ee5d.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","@material/tab-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"85137ac5f9a59dd64512524f380c65b268a2344f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/85137ac5f9a59dd64512524f380c65b268a2344f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.6278ee5d.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-+YFOMGQBJy1dM/yP920+SbvYzg89Dc9C+OIzFlYcXxLjZ1bEWZfNIjbU3ko0VPOYUG+dEkbRBQGq3THsONT4pQ==","shasum":"aff74dd766c9b93f639444b81de6ea51d4d28458","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.6278ee5d.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC/sTGOxJ3j8v9izGWW9W88BjiMRExgysgQX74kcY47+QIhAO6fjJ3AV9902J/+jR/oClBoDLBFqRHkehdU1pZrxTW+"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.6278ee5d.0_1632767507418_0.41900655474640547"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3a5d5f34.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.3a5d5f34.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3a5d5f34.0","@material/mwc-tab":"0.26.0-canary.3a5d5f34.0","@material/mwc-tab-scroller":"0.26.0-canary.3a5d5f34.0","@material/tab":"=13.0.0-canary.c79aa0cdd.0","@material/tab-bar":"=13.0.0-canary.c79aa0cdd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0708ad010478b6186d6be52d3494f33bd4d40e17","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0708ad010478b6186d6be52d3494f33bd4d40e17/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.3a5d5f34.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-oVKtlg/EBgUvpNDxiwWV04xQGBXrHtdZZDNR20VJV1MtmR2uXt96pZF4223wi4+eL/q9oqwdpbK9brjEBxSO/A==","shasum":"9927aae1c3ca95bae8a1ee16b0c870862308fb9f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.3a5d5f34.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEPrJNPQ+fPJnkpQsmOvda9GXItfOswLxLPYu9pVhEDeAiBADmreWDeNEW7bh97/OKctUCZmhZKKF5HdGm5bz7wgoA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.3a5d5f34.0_1632782516483_0.6352029238386037"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.143ed3c8.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.143ed3c8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.143ed3c8.0","@material/mwc-tab":"0.26.0-canary.143ed3c8.0","@material/mwc-tab-scroller":"0.26.0-canary.143ed3c8.0","@material/tab":"=14.0.0-canary.86b50ef74.0","@material/tab-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d25beb586046dd7cd30a302cdbcf1114a66b7770","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d25beb586046dd7cd30a302cdbcf1114a66b7770/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.143ed3c8.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-1c5MFrbvh/lWNw1+yEywzI9vITopKAotAjE/xSwQ9w6k3nqSPl9lL4SIsNvWZrzYfXPr7VBdpjktflh7MRAWgQ==","shasum":"011bec696c70d886e7db1ea03cc32d0af6563c0b","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.143ed3c8.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5VM7RcdH3P4cqNd40nD62Nel/DXu7EC4j9T7XgomUiQIgMm1XoELjXN5i9WBpHsAhwf4wfq7bzxZfoC+pj2zs6wE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.143ed3c8.0_1632880276059_0.43759329183169715"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e5923d68.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.e5923d68.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e5923d68.0","@material/mwc-tab":"0.26.0-canary.e5923d68.0","@material/mwc-tab-scroller":"0.26.0-canary.e5923d68.0","@material/tab":"=14.0.0-canary.86b50ef74.0","@material/tab-bar":"=14.0.0-canary.86b50ef74.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"41f6e947d4028d5479ec62a20cbf1e1fce3c3a27","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/41f6e947d4028d5479ec62a20cbf1e1fce3c3a27/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.e5923d68.0","_nodeVersion":"14.17.6","_npmVersion":"lerna/3.22.1/node@v14.17.6+x64 (linux)","dist":{"integrity":"sha512-MUmBa/IU7IUqqrMbRCj74KVdUzidQ1s0fJ5QHb+nL3F2IyvngOhu0KfAuV5IvV0iY3Bz+KaZUnes84YkSuwLAQ==","shasum":"799aec35e548ebe178089633e87cd011f2752cc3","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.e5923d68.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCcMYY0OZF2DqiQyyePWiTCGF3GGu26FLOdeDt59qxe/QIgQqvCeIx9L1P6pPeGvMWnCHdoXw3Oy4Tll3dSsD1UDyc="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.e5923d68.0_1632960377316_0.46289811689381577"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d8ed5109.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.d8ed5109.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d8ed5109.0","@material/mwc-tab":"0.26.0-canary.d8ed5109.0","@material/mwc-tab-scroller":"0.26.0-canary.d8ed5109.0","@material/tab":"=14.0.0-canary.586e740dd.0","@material/tab-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7cb638711a37e4d716e9aecb64598a665d377e7c","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7cb638711a37e4d716e9aecb64598a665d377e7c/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.d8ed5109.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-7WQMvZfOk06BEGOWbdcqyVdHy9eF071wD3ZVyWzwpeNjdsq9t93Lh8SGOqIdeTlDOWnh0IYUxZnDP+Inyersnw==","shasum":"c5565b0515d618be64e3e8a15bf8cd3f2a096230","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.d8ed5109.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDDWctqlc7kULyEkw9J8tGQya0bdLtGPh3KehAaCR3UzAiBht6OhFOMHnx17N9VHk4UdcDstiGvS90PdUztUI9Ynog=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.d8ed5109.0_1633044858686_0.031836404151065256"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0efb9c2c.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0efb9c2c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0efb9c2c.0","@material/mwc-tab":"0.26.0-canary.0efb9c2c.0","@material/mwc-tab-scroller":"0.26.0-canary.0efb9c2c.0","@material/tab":"=14.0.0-canary.586e740dd.0","@material/tab-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"878935c40ce21b0cfddbf2aab964ba07d23dbb94","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/878935c40ce21b0cfddbf2aab964ba07d23dbb94/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0efb9c2c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-0yXQ1OW6ReVlq39R7Cvabs08aWBfQcp98v20VkhhUBcukNf87hlgGWyPJmUYWOv5ErYgEjYwFQlF9rwcWRG3Ww==","shasum":"7e339231452300579571ee5a78e00bd4225e9aa6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0efb9c2c.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA1H2de6A6EeqsI9x6X3BG2Lu9SuF+cdBkeUxCyEbwQfAiEAqpjDj1bG5dp/xMvxnKcPMb8A9/eAxWppmU/BUULKpfM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.0efb9c2c.0_1633140521151_0.021748137379939525"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.1c9adcb3.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.1c9adcb3.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.1c9adcb3.0","@material/mwc-tab":"0.26.0-canary.1c9adcb3.0","@material/mwc-tab-scroller":"0.26.0-canary.1c9adcb3.0","@material/tab":"=14.0.0-canary.586e740dd.0","@material/tab-bar":"=14.0.0-canary.586e740dd.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"432b66e41cc474278a452cfd5bd850754fd8b9f3","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/432b66e41cc474278a452cfd5bd850754fd8b9f3/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.1c9adcb3.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-7KZtLNCbrQXWTpPXeEMuzRqp4J0DBZS8DG/ncAwvziJCtv4u2KaQ2n5FgyHKddNKU0tXw1jzRiCMgx9SBFU6Qw==","shasum":"bf5e059f2f735432cad02b77707fffbbcadfe76d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.1c9adcb3.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcuAjHI5aU1bhSTj9pu0TU9+N+4d6czBDCacnuapu3TwIhALRg1S0suBn+eJmd2lrnlkrgLMLUlwmw9lw1jBNfgDme"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.1c9adcb3.0_1633368841377_0.7758223731623133"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.dfc00d60.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.dfc00d60.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.dfc00d60.0","@material/mwc-tab":"0.26.0-canary.dfc00d60.0","@material/mwc-tab-scroller":"0.26.0-canary.dfc00d60.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","@material/tab-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3edf5d72f0c17bcf7c2e7377e2c0b4579168d2b0/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.dfc00d60.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-cCBVvXruvooVlB7WpkRubsrsoWnglLbrzwVUENmdPW/81a+mzd8kDxgL/Af4tuKHAP93tp4kIFvWZvc/euS3cQ==","shasum":"03d3202675b3518946e82289815a969dc2fb4949","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.dfc00d60.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFEdmsuQ8yUfC5P4HdnsVZJxRicqkPwZCf4v3G2Q1ovvAiBtj1UZbU8JSD/59sicnytiuEkS2PtgddgP/syzNc4KAA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.dfc00d60.0_1633741064841_0.2742067704993876"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.c3aa844c.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.c3aa844c.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.c3aa844c.0","@material/mwc-tab":"0.26.0-canary.c3aa844c.0","@material/mwc-tab-scroller":"0.26.0-canary.c3aa844c.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","@material/tab-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a792c732afb00bf097879fdcd7a1ac2a0c5d9506","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a792c732afb00bf097879fdcd7a1ac2a0c5d9506/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.c3aa844c.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-tM8tbVKodxoKo1Js2+CULhfZGz9MTw1iARTdOCPHDPCiP3Y51FO7EVIbsCQ5WWto3HGSBDHpB36vr0D6/MIhdA==","shasum":"d7e07c04dea57bed14b518f66245cdcdcd871d8c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.c3aa844c.0.tgz","fileCount":15,"unpackedSize":43895,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwMogPX2mSMQmWyjGg7YzDcZOKGwMROSnZ+N91HJjtFQIgLuC0SJlKmB9o2oxb542K+0oN6V8gfLrg+wLPBo2h2/4="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.c3aa844c.0_1633994086198_0.1870712869611495"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.2":{"name":"@material/mwc-tab-bar","version":"0.25.2","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.2","@material/mwc-tab":"^0.25.2","@material/mwc-tab-scroller":"^0.25.2","@material/tab":"=14.0.0-canary.353ca7e9f.0","@material/tab-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c3aa844c2a09ff9868820ce946f25f9df7714560","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.25.2","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-J8ndncV1l2oo2+PGn//T5UN+ouUs3zZiVsfzmeZEflpOkr2+V6swj/NAnPeWrtVwZA2wR79Qi4xP0vgWw+r1GA==","shasum":"48931a45d3f3f30facd25313418c9d12ca73e974","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.25.2.tgz","fileCount":15,"unpackedSize":43826,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFbkZQ297pCZOubKCDUp+CVPtob9v6inX1VmoEakOSfkAiEA52fnnpXha+j8Y9wUFlofxmPSb1gieYMDLr4negmyQR8="}]},"_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-bar_0.25.2_1633994317627_0.5658586288489524"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.406d6fe1.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.406d6fe1.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.406d6fe1.0","@material/mwc-tab":"0.26.0-canary.406d6fe1.0","@material/mwc-tab-scroller":"0.26.0-canary.406d6fe1.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","@material/tab-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"d1410f3120b13ff08ccd731739c038b9fb14af78","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/d1410f3120b13ff08ccd731739c038b9fb14af78/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.406d6fe1.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-xKFBAiJyq1Rd0UnLQkgTsSo1CHUZcaUWXwVfFJg++09VLAYF83u0dEETn6iEc4K+qVau9XmAlh5wEeR5baQxnA==","shasum":"41041f9836279d969d0db5f59994f0432d2b932c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.406d6fe1.0.tgz","fileCount":15,"unpackedSize":43871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE12928FVgDRkvm7NDfhlLjZe18cwGzrhesql4OtqZY0AiARx0AxKya0xRkZd0U8IkZ5+R3HXdp3yEmvHIgcutLoeA=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.406d6fe1.0_1634158795730_0.8486127776255763"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.ca0a674f.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.ca0a674f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.ca0a674f.0","@material/mwc-tab":"0.26.0-canary.ca0a674f.0","@material/mwc-tab-scroller":"0.26.0-canary.ca0a674f.0","@material/tab":"=14.0.0-canary.353ca7e9f.0","@material/tab-bar":"=14.0.0-canary.353ca7e9f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b8e99d19dfc1b6d5062ada3345d461e9a77f18f1","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b8e99d19dfc1b6d5062ada3345d461e9a77f18f1/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.ca0a674f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-i1I0SLCRBgjLn5ih1BSK7+CddKM4QYYWTybooQ9nmr/Z4MYzNFwGKKeKf8oTUh9ew2KDBQ6/UfA1W15CEe50Gw==","shasum":"4ac9388ccf5c1461f8d81b04ed06c980a4c80b49","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.ca0a674f.0.tgz","fileCount":15,"unpackedSize":43871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICfq/ANYISMxL8Mr5xFS01wlJEmIHLVZG6E9sp6dAoFMAiEAhIDI9jewcDaTEM0ESHy9o3wuzhf/Tq2Eu8MzoV53fzE="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.ca0a674f.0_1634593042523_0.004601757041982735"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.eefcf660.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.eefcf660.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.eefcf660.0","@material/mwc-tab":"0.26.0-canary.eefcf660.0","@material/mwc-tab-scroller":"0.26.0-canary.eefcf660.0","@material/tab":"=14.0.0-canary.261f2db59.0","@material/tab-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"70552d8e831f6542ab42f41bb5d338adcff0500e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/70552d8e831f6542ab42f41bb5d338adcff0500e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.eefcf660.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-V2KV8FFMcdUwKz/FVSwg1oCcs2O2cv6KrmlZIbPcw8ajYnrI6Vv8831bBGZKVuSKFjcsBNbsjLbJ9v1gcORHhw==","shasum":"11fa3e6736bd11f87eb6f0e47cff179231f68183","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.eefcf660.0.tgz","fileCount":15,"unpackedSize":43871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5pdHc1q6xJqLk1iBA0UKyWnqUW1K/YbWtL/3d/enmsgIhANrPVYodl9el0IDtyM+VWfkjU65BonocrGT/YpJ7LmZU"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.eefcf660.0_1634765041257_0.7769298793091906"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.d21acc8f.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.d21acc8f.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.d21acc8f.0","@material/mwc-tab":"0.26.0-canary.d21acc8f.0","@material/mwc-tab-scroller":"0.26.0-canary.d21acc8f.0","@material/tab":"=14.0.0-canary.261f2db59.0","@material/tab-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"13f43aef10317d911611c572ecc044445a012a2f","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/13f43aef10317d911611c572ecc044445a012a2f/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.d21acc8f.0","_nodeVersion":"14.18.0","_npmVersion":"lerna/3.22.1/node@v14.18.0+x64 (linux)","dist":{"integrity":"sha512-LZOVybamdS65MzHaWzu8EgjufUgeQ3b4GTkHLgkQDabRC/oPkROYKrl68O4WsyiAIKamwMC+JX2E8Ir9Z3/iLw==","shasum":"4fcac5d91eba75b3a3c72161fc9c6bc703343e09","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.d21acc8f.0.tgz","fileCount":15,"unpackedSize":43871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDckfMZyH/P6U2Xqngodhv68vZR833+9WJMMHsQ4Ai0SAiEAhTExdeDBbpAaB4DErskw/2es3wqlhA4p7Q7nNhPxW70="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.d21acc8f.0_1634769175278_0.37681346112967407"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.25.3":{"name":"@material/mwc-tab-bar","version":"0.25.3","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.25.3","@material/mwc-tab":"^0.25.3","@material/mwc-tab-scroller":"^0.25.3","@material/tab":"=14.0.0-canary.261f2db59.0","@material/tab-bar":"=14.0.0-canary.261f2db59.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"1f19804bea995fc84ab35feb67668d9874ff10f9","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.25.3","_nodeVersion":"12.22.5","_npmVersion":"lerna/3.22.1/node@v12.22.5+x64 (linux)","dist":{"integrity":"sha512-nzfoz34lmY50GmFUNSOZeCZSDQkJWgCdtBDBrEewufONMgxnuLwLjW0rc1NqBa62/dQ9E7G32rCDVrz/8fW0cA==","shasum":"46dcf333aba2600b6280716af57d716583101c7e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.25.3.tgz","fileCount":15,"unpackedSize":43802,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIErj9xVvdfAYM/3kg6hUeChXTBg3FkAwtX6yKyucpjWtAiEAjsaTzylHQ+PuHjB3GQi541y3+YSytdLOndXTZj9r4xY="}]},"_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-bar_0.25.3_1634838948925_0.8792030662206685"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.60449b7b.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.60449b7b.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.60449b7b.0","@material/mwc-tab":"0.26.0-canary.60449b7b.0","@material/mwc-tab-scroller":"0.26.0-canary.60449b7b.0","@material/tab":"=14.0.0-canary.9803d2dc1.0","@material/tab-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"cb5b8ebecb046df6d10001a163b69a26954c94bf","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/cb5b8ebecb046df6d10001a163b69a26954c94bf/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.60449b7b.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Hju15TH/+o2SKiNL6MtJRbMxAfh7DEbx+Wj62Xyi+2adaeqKJdyvFLBYG3F3QErmfU10gr6Q+wf1+IgNoE1UZw==","shasum":"a3864b27f3d5db2010d216f6cd708125515f71e5","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.60449b7b.0.tgz","fileCount":15,"unpackedSize":43871,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDJnlr37U24AMwJnCN/LuyE5pJV2k/xTch0fNCWxNTsLAIgPRlRkmTQjMDUmPcSTmn7LmCPUWilZqRGe/G3u23be0Y="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.60449b7b.0_1634840276386_0.545140926902592"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0d8084ed.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0d8084ed.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0d8084ed.0","@material/mwc-tab":"0.26.0-canary.0d8084ed.0","@material/mwc-tab-scroller":"0.26.0-canary.0d8084ed.0","@material/tab":"=14.0.0-canary.9803d2dc1.0","@material/tab-bar":"=14.0.0-canary.9803d2dc1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ca8c4979ee49843dba32b345040faa8c1e8a22a4","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ca8c4979ee49843dba32b345040faa8c1e8a22a4/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0d8084ed.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/ZORcHCVTINdwDjva7ZDVLxUN3AgW5C1c8njH+XnhI1OOIbyOj8olUWldYGeHHA1nyx7RXyIylgF189Mh0PBgQ==","shasum":"438796adfd3852c9dba9dc44a7e1d3177c9b4f07","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0d8084ed.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMZYWKGAuU82riB+SQQVPZxLum7BaKmoUFKaMAcuPwtwIgJupTxX9DfWu9le8CNYCnuo1KEAwSThl9se608uxg2KM="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.0d8084ed.0_1635443120983_0.7678341382813674"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.232327ee.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.232327ee.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.232327ee.0","@material/mwc-tab":"0.26.0-canary.232327ee.0","@material/mwc-tab-scroller":"0.26.0-canary.232327ee.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"0645d0b4b0eac5799fc20a3bd279788eb66a7564","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/0645d0b4b0eac5799fc20a3bd279788eb66a7564/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.232327ee.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Uw7m25Me0Y6jbLnFYzwfHEZjzbGzbl6FxfLqrqAtPDD7a603MUaDAw4dLX5uEBpbc8L9aCkozXzTwzH/vISpyg==","shasum":"029bd242117d2bb88e812488dca27e096f4b226d","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.232327ee.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAdbGFYbwhEfK9KoS4rcoZryaX06GLPR3Z3MSCrLnFhrAiAwmzxD/6SZ0zZORc61eXWk6tA9hyVMbTA4sRywInbNBw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.232327ee.0_1635797773751_0.6053551759785365"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0a492ae8.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0a492ae8.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0a492ae8.0","@material/mwc-tab":"0.26.0-canary.0a492ae8.0","@material/mwc-tab-scroller":"0.26.0-canary.0a492ae8.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9f520a49648fd39a7140df761448008fe0fbb492","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9f520a49648fd39a7140df761448008fe0fbb492/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0a492ae8.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-GTpUIuxqXvPVx5bCgzQlgclJsWQa4AnotWnCzcfcTSyiT3TkWPayv/wjOO0/jh4uIkHDaUCeFfX+SfFVBGB4Yw==","shasum":"db6fd12d8c7d6bc7305b049f11d69c8d019b77af","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0a492ae8.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyB9HQkss/LE01aNzIDHWkNtpmhOhxIQ4TOLwmcHg76AiEAx8QpomSwSmpDCptHMky1/CI6AjiRoaFhpq/qeIgL4FQ="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.0a492ae8.0_1635847257971_0.6805970345566972"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0aa18745.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0aa18745.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0aa18745.0","@material/mwc-tab":"0.26.0-canary.0aa18745.0","@material/mwc-tab-scroller":"0.26.0-canary.0aa18745.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"5345838b7f3a3ec41bf4ef997759be6aae3cd340","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/5345838b7f3a3ec41bf4ef997759be6aae3cd340/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0aa18745.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-yRNkz6Q/McutHlFRjndNJXj6O3rX1FQRGdZ8blhkyxtKzp8EaY8GZNGzC0rUmE2pXb+eqL/50vLRO0AqtyGPTg==","shasum":"47a3d964e9c04f0bf55628e80220bc320be0fe6f","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0aa18745.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIASmlb/hc6Cxyo3u4HtWkle4y/iP0BfUtALlsg5BwRwEAiBnBhHpD2Hwxkb0rwfvrX5/LR3hTog9gwMMdaVhTSc9oQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.0aa18745.0_1635876498963_0.9025906642465993"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.f3e28323.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.f3e28323.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.f3e28323.0","@material/mwc-tab":"0.26.0-canary.f3e28323.0","@material/mwc-tab-scroller":"0.26.0-canary.f3e28323.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"ebbbec0b1b0e29da237ec87bebd889c3af847f1b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/ebbbec0b1b0e29da237ec87bebd889c3af847f1b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.f3e28323.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/5T6EgTndM2yFdBwduaZVcsHuRvGE7nK0hMUjhCzpUQs7xthJ0hb0r71Zlhgb+xrgq7RTSbpR4Xdtnmun2EoOA==","shasum":"2728e3b7f310e54d5110dcf36cb8559d8049f6c6","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.f3e28323.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID/aBLwD6OSzo42AvDS+ng8/ZTDsklwCQZH79CT4pbcGAiBigHcxW5iqUZx464YTzZWmPKnk+IohIGGJsxkLq0AVsQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.f3e28323.0_1635879600069_0.11033074276301469"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.27e05c5d.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.27e05c5d.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.27e05c5d.0","@material/mwc-tab":"0.26.0-canary.27e05c5d.0","@material/mwc-tab-scroller":"0.26.0-canary.27e05c5d.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c052b0acfe9f929e6bae475576f23f8349bde578","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/c052b0acfe9f929e6bae475576f23f8349bde578/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.27e05c5d.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-6iS0JBKQ04wUqj8+dGFTXboxmOS9yE7+6Btx+YuVSFrdHwFT+PZ9sRIB6+kPNKasqYyArbSadJCxYzLg+lLzRw==","shasum":"064ccc36c6dc1dcd837e24dc5ca13e5201d4a844","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.27e05c5d.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBZg1UZn6A94bw5De9pS6f8bd7kXHRShbjWEmFHvC5wQIhAPqBhKTsloEEj2E4pR5xFDrQ+6NvaUnHB+NRPwntaT/9"}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.27e05c5d.0_1635965127493_0.15458944776877237"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9e44af7.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.b9e44af7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9e44af7.0","@material/mwc-tab":"0.26.0-canary.b9e44af7.0","@material/mwc-tab-scroller":"0.26.0-canary.b9e44af7.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"93bbd63ef108db911df936720517c5068ef30dcb","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/93bbd63ef108db911df936720517c5068ef30dcb/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.b9e44af7.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-YmqGvBtWs4HNIkpmV3QzI6/0FdK2+bq90vve6GSK/LWZ2Fv4iCDDajeJdBdP5lKJgm4+NMV91VY0ERopJBEKjw==","shasum":"14dec2557e11ef4aa56826590b8bdea6f1f1c9d4","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.b9e44af7.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2L71cbNtW0HlPkrLOgU9J+MoceMLvVO9v3bXD2AwAsAiBCTk2JJD8c6Zq2PtrPAKOAMLBc/Q+VLOSZwBhSk9T5bQ=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.b9e44af7.0_1635966267394_0.3267123182693601"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.448f6cb9.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.448f6cb9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.448f6cb9.0","@material/mwc-tab":"0.26.0-canary.448f6cb9.0","@material/mwc-tab-scroller":"0.26.0-canary.448f6cb9.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"b9833961f155dca92373d3a6f0476bc8cef934a2","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/b9833961f155dca92373d3a6f0476bc8cef934a2/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.448f6cb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-E8RkOoCYHGUXlov+bf+kf/6k9IvP/NHGA4DdsciZOIHOxx0GtshkpYpUg2d8RxGGwlN00AilGAXT5hs0d/hTrw==","shasum":"ff37df58749dc905b454c723140ccd3a415d6eaa","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.448f6cb9.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBCuPuTdbuuxTKkd6FHTaEngT0nVdFzCoty/XUtmndrzAiEA2rLK+kqFgeki8zFNTBTI3/BGYBCY+1iE9WfTXbToqC0="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.448f6cb9.0_1636049300146_0.09970152745622607"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.8067ce28.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.8067ce28.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.8067ce28.0","@material/mwc-tab":"0.26.0-canary.8067ce28.0","@material/mwc-tab-scroller":"0.26.0-canary.8067ce28.0","@material/tab":"=14.0.0-canary.a986df922.0","@material/tab-bar":"=14.0.0-canary.a986df922.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a4d0d35b15bd6e7a29375f11c520886e5b9d168e","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a4d0d35b15bd6e7a29375f11c520886e5b9d168e/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.8067ce28.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-QG4LybYiVVQrsQY1FSQK2OgllYuhwx3Nms9N7Js8O2JvaosTn5dG/EGKF0yRh0jgSG7MdTHDgMtqQHHX6tz06w==","shasum":"c9f7ae83a867d9fbbfe02a731d46971b59449023","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.8067ce28.0.tgz","fileCount":15,"unpackedSize":44662,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICETXPTKfhIRlhS/jSTzrKcupWwRn0Hj/HWFAuorVWlPAiABDhKaaggiyfbG2Y413+B0qJH5wnYr2XeC5OL9pBNyzw=="}]},"_npmUser":{"name":"material-admin","email":"aprigogin+npm@google.com"},"directories":{},"maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"williamernest","email":"williamernest@google.com"},{"name":"aomarks","email":"aomarks@gmail.com"},{"name":"emarquez","email":"emarquez@google.com"},{"name":"allanchen","email":"allanchen@google.com"},{"name":"esgonzalez","email":"esgonzalez@google.com"},{"name":"asyncliz","email":"asyncliz@gmail.com"},{"name":"candysonya","email":"wangchan518@gmail.com"},{"name":"ssuarez","email":"sayrisuarez@google.com"},{"name":"taylorv","email":"brian.t.vann@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/mwc-tab-bar_0.26.0-canary.8067ce28.0_1636064572624_0.9019996886637196"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.345c2bb9.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.345c2bb9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.345c2bb9.0","@material/mwc-tab":"0.26.0-canary.345c2bb9.0","@material/mwc-tab-scroller":"0.26.0-canary.345c2bb9.0","@material/tab":"=14.0.0-canary.43d08ba77.0","@material/tab-bar":"=14.0.0-canary.43d08ba77.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3e7898316da6adc11d19b54d685e52bc4bb79733","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3e7898316da6adc11d19b54d685e52bc4bb79733/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.345c2bb9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Vw58C56Fheg4JunFUi4a4NHKOgNGnJPvMSqn3KNt/OVl7bClF6MgE4/I3J5NeywEqMSMmShXxDcHty76fabnZQ==","shasum":"0d4389ee734fcb0cb119467655a4435de1d47d71","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.345c2bb9.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqP4aCRA9TVsSAnZWagAAC+kQAKFR/icB6rx+T5go1uHP\nYcrctChGGdAv3qZriUocli4Lr+dHldxt9Vc2isOjOR0JTVoGzlW9tpk9rkI3\n390vu57Eb5SSdSHalcL4/Kks4pY++RDeVYVGMk3oRgwk0cdSfJ1hBkUuJ7fl\nBFBy66sAaYrpRSINgK67s5Ov4M1lTrtDlhlUyy7wjCnM2u+KBL84DtAyadDX\n4wHDvsJ5Kq84R8rf6kPmzTy0XphUAh3sCuPTTBclsNJSrcFZRI27g5C4RCKA\n3736UGiTinmwM1rhS7Bo3esIR/yE9KOFl6maUWkICV2SSMBwiME6DiCtrtiO\nLXd57hgfNE4rVuOCVs6Mi8X1qy8aiSgQTR3/YMS0qvxLLa8CJ1qKufGFFPX7\nmYF8hACWHQlcSTvc0VZRjUQ/2V9xnj8Kr7bCvIi1KGlMJA2OAHb3yDStcTBB\nF3wTRuxrUeP/zMuKjJjOzPgtXXMVXDamJYXIw47GZHEat0l8Xg1Z7WfE95b+\nBx9KkM8kPC++fE5jBP5TZYOGD6hwq6egv4KQjZjn7QnqsUW7nVjl9Rwd6q08\nSHj4D4bPAqHTAJtqaw7ynIURGrDaTZrN1Cz4XpTYQACXTGdQXom8yKMwNX6F\nkaX+7JxJhNn94f+QDpNAdHy9Rl8oBroPAnQpf1zbqxVP3XQQ/hnYU4mzA1AF\nqzlr\r\n=HfB+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgIuLPmVm88j4XgohRlSj7yC9DymhJ8UdTi7+QINa10wIgc3s/iMaaoz0y6hMvOjbUVPwfajKp8Sw3jkhgY8H4K/4="}]},"_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-bar_0.26.0-canary.345c2bb9.0_1638465050148_0.6622799149358667"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0547aeeb.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0547aeeb.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0547aeeb.0","@material/mwc-tab":"0.26.0-canary.0547aeeb.0","@material/mwc-tab-scroller":"0.26.0-canary.0547aeeb.0","@material/tab":"=14.0.0-canary.17a072535.0","@material/tab-bar":"=14.0.0-canary.17a072535.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"2115410a9593d1f2c95099961aed3e6e61255f88","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/2115410a9593d1f2c95099961aed3e6e61255f88/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0547aeeb.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-v64Ci8bT0xh6Dcv9LtuURRNBLK7YmyFHSlOwqd9t3BwMqWOw4E0Urf2tIU688kglluR39Fh+8l6KKn+sGXRmtQ==","shasum":"d3f820108aa2528e24a64e8d58c3b31c87d9115e","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0547aeeb.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhrjwjCRA9TVsSAnZWagAABJsP/38xOMc3icmO8NDPVF+F\nIx5jp8hjS7+92s4nsIaJx2KciVd1ZjvVvpzxYV2QWQ2OXVOQWnTl72l83oVu\nB9t1FLLu2PsoCQ8wG5EQMUuQ/hKuROUQJOKiuKN6Ci3ZKCNeDUaBXNlSV87Z\nQvXK4uNF3TYuv83Vyg0TTt4ioiDR4cp4EhEPzbiatB1IqntUAwEEQaz6yhsa\nA5ipKPu6LM6uYIOUcGVphCUqBGKlq19i51/kiSesYtzwC0fh3aNI2YA0gOPt\nOwGUx4cUtoBjmDttTUCk54mSkL31Ez3AABjBbzb+dERvaITYafLGptvncOVm\nVCs3STME/WTAwNqKOlhH8BWFFw3nEOL+DBUuP5DjjrpYEuzKnFFxxfEipf7J\nQdgpTXOQEgNibNOUioACH5vPUk5SsplfXqLxh0ysssN2T2345bkjvqmmdX2t\nGgBrTXLuhlmoXE/MWWmIg8ytyEjKx79KdJmKlLvWPz8+DRdjjk5qFhUGVrM2\nMp1jO+b8g+8EQKAn+6fy1kygfvgxEYEN6IGcdFwTQbLbTKTQ90p5gcrEvSO7\nNcRP9Huil1SaVJlvx3P/GLQaOaruAR2R2NFET+DfIMTe20liRyQnLegTuSo5\nFKinkgb2db40TdiiHYLYXBClwXactiWHc+5hruIDNymBlX7mYouR+p3gQ2je\nRzf0\r\n=Hcb6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHJVkiXF6v7Jr9ajY6ZmlBqBVqFxaRaN3GGqHZ+gULSPAiEAsYh9l6/rUZHklL82uPXtWGL1Es881X/dtx+NpiczHUg="}]},"_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-bar_0.26.0-canary.0547aeeb.0_1638808611612_0.6520481727353482"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.3b2452cc.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.3b2452cc.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.3b2452cc.0","@material/mwc-tab":"0.26.0-canary.3b2452cc.0","@material/mwc-tab-scroller":"0.26.0-canary.3b2452cc.0","@material/tab":"=14.0.0-canary.b6510c8c1.0","@material/tab-bar":"=14.0.0-canary.b6510c8c1.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/a95f7a1cbf5dd38cd64c9bb8e02e76d0b8927f1d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.3b2452cc.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-/2rjgUe/FX9rCgdAk9V225lGpOua+RQNAoKgN0JUuto9ba8td7JrF7yc5Y3iVSIfHee1wNViOiY9zg+qhZPrWA==","shasum":"ecdcd650345c725f6b3cd5376746499da95b7e61","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.3b2452cc.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsUh9CRA9TVsSAnZWagAAZEAP/2qEE8HL6ln76Vcm4U8m\nAru4hRoYdRkvgiOM9ZCQhA45NXAPa8laCj9qqdu+Dh+V5Yn5AF++hufds55s\naT4HA8YC8d4uSihCePBi9QdSn8eySC9ihAFq/xrQ+jp86dSSpphKqR7kQAIL\njbytTLz7Z2e7ITMbBzrEuiOvQKLQSsXFumUGcHf3gioKKKWdIp7gNQ9emeIN\ni5MJ9yCmEGjieeZbId2kH1YECTO85N9Ha6mhWj0r14FEbIzbJUPc0YzwysRT\nQfcwF2zzzXKPUfEBpodXDnu47keKOQfRltWc1i3OaHOqgnhvCj8aFap/sYEj\ntgnN0tzSZ83O42xs80UfcHGxAiCyCLi3eZscHO7MW1/G2FkfQZw1/5zBvBom\n605APYu63P27XUb+b/8RIv6qW9gbNpiPAKDk8Ip2wHepA28CytfsXifsVeVC\nPlXqzezZTMrNuZSDCTbfkO7eyawLkuGOBh02hCeQwUhnOKUfpyB54NHE/f8F\nYvRYhOmI0KwbgSODphxUw9luHJGRtkzKxAt6wgwjU68RmcaWp2I+9NXgaEV+\nxRe0vBAlo8DgR3DvzxezvnkT0sdmOMz9eK1yZ0Ua7RQ8XzBr2DD8wVR414jl\nFP5m6cew72Pll/jyYIRrVvZpt5a+9JImW42LqREwRHPt2bPupSRuMXN1XJ6N\nb60t\r\n=QCtq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCT06PBYulEjcq1Aun6hHDQeGBwqHcR8oBipbJjNZ8I4wIgffZagCC8wf7YfPHq6mmQ1uJJ/0Uq1FDsUOvIN7QE8yo="}]},"_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-bar_0.26.0-canary.3b2452cc.0_1639008381280_0.1417667058615677"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.cf7ba5a9.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.cf7ba5a9.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.cf7ba5a9.0","@material/mwc-tab":"0.26.0-canary.cf7ba5a9.0","@material/mwc-tab-scroller":"0.26.0-canary.cf7ba5a9.0","@material/tab":"=14.0.0-canary.f460e23da.0","@material/tab-bar":"=14.0.0-canary.f460e23da.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"7e92aaee33b1c30269a52ec2c26232d0690d3d58","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/7e92aaee33b1c30269a52ec2c26232d0690d3d58/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.cf7ba5a9.0","_nodeVersion":"14.18.1","_npmVersion":"lerna/3.22.1/node@v14.18.1+x64 (linux)","dist":{"integrity":"sha512-Bibvu52vum1p/RRI4uiisuDDIkm0h6Z6O5WjtopSfsZtwbW4SsJZQ7GmLiIkDYagnZ7wO4v7Qs/mW181wnYlXg==","shasum":"97fe02adf15d0ecce334cb2f89c3a7d50618cf68","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.cf7ba5a9.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6V5CRA9TVsSAnZWagAAsK0QAI/nn6CA2cY+5yzzCDbS\nuFPCBUWlLaiNhoKmWNghZD26K68U4bKWE/aHQxXCHyQbdX8CuAqh5kRDv2FS\np78+uBJ1Mcf5ZnSI6dL+UQKGhNEUSue9Oyc36SOf4N23WK0z7jadfjDV+Vkq\nXfIm3kAupzzxDatCvstD9w12sFYCegVtbtIwQIgJ22dl0Te9iNg0nVknxUZL\nUHDjlcZNf5bobRsYmdrDEJGBsWCLOGKGDfbXDlNsQeSDPG0ONdC2NA+UgExn\nsAaOAKkg4r2rPZZiVmAET3IJRkMXnfUQAdcAES0pP4dN2pw0wh+IsPtSlIvB\nyOqJOOoKMeXdYqE8vdBpaZVbz8snq/1VjZDGwOVuynzoWLKl+rrptQ4b0LHS\nud/8V4d0t8UnbnhPqsKvL/7EZ+eScd2j2V57WEuRNxaigvVTtKIjI+1ratXX\ndfDfv/oS1Ci94T8r2RcfKKiekZaY4Af70KyQMdafszq0vUS3uG8g9a+MX/n5\nkAKe1+8deJleT5IQVhA0jqbvGd+6opvur4AFppHWrrGf8bG1NILHa/61nudu\nzZWh0Mxofuz7+5v3QcY5PQA4u20kuZUb7OKxAOEonFkDN6/yYVW8522XAUzs\nDnSfUMr0o+8L6j52pCwj00qMEKsDHlewNEeysokqBRNwQVVlAhEQGL60vYx+\nZrix\r\n=XBV9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD2NVZFz/SjAFCd8lLeZHF5S/nwX7tE9L0n8O5uHOlZXQIhAKen+79GrPMg44nnTXeAQNmZL0hi1RDkpZuICrQpR120"}]},"_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-bar_0.26.0-canary.cf7ba5a9.0_1639163257693_0.778598480074542"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.e1bcf14e.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.e1bcf14e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.e1bcf14e.0","@material/mwc-tab":"0.26.0-canary.e1bcf14e.0","@material/mwc-tab-scroller":"0.26.0-canary.e1bcf14e.0","@material/tab":"=14.0.0-canary.3366a71d7.0","@material/tab-bar":"=14.0.0-canary.3366a71d7.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"3cb6bc85426db9ac617c732735c808fd66cd1572","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/3cb6bc85426db9ac617c732735c808fd66cd1572/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.e1bcf14e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-5UnWNWgmXNLeglOd3/n7TXckNaMbDSZ0kx1bVkHkpqKAuXfr32mwlinzGRXHz0N9H2npTxS2shEodSvDcVK7tw==","shasum":"5b18e34320efa4c309a62b3d8ed4dcbc3a623948","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.e1bcf14e.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhy3eWCRA9TVsSAnZWagAAKzUQAI62O/hT0kMCVjlxVrVr\nVVTKDRd6FK3En7ofqRgqwK6299jseYw/v8uAihbj0841l9BLbfoA6H7/jctv\numug45tf81nW4VqQA5am+OldHVPxCGjauJRdx5/DUH9rAhqCDXy2WpgIoqBN\n0kIO59n9fBpKLj5OnwAGFUJBnEldRQdmPO6XtJeX2FRn8/haZxtk53whR011\nSRmRLBzOfsKH9V5wfbQDJ49OQqijhClbfpiUPl74AOZsqsi7DpAj4SIYO/fd\nMIBGk7H00sszm8R6mqD4Lo1Yyw7X83akISvQjEJmDDWyew2KdS1zKP180ESU\nlbqmqSHTGoH1q3Q9fjilEaeHzfqPiX/hp/vqukJepF2qQ6exu7MSUXKcJ2h3\nvQeLLA/TtXyKrjBKlUy8BhVt0pzTm/IA2QgUQJ21e6M9U5ZSYUeJ4F6F5Xrv\ng7Bget9oAbkeT276vRD8XLhF+kUcJ/QXPBwl87K1ijtnBNp8jqOyqJwNhzOl\nayGjz/3dYpQIawCt+/Sog5VRf2pzt1tTuOSUV/rOoSodwB6U7pVX0E0Gin3d\n5xAxLJlI3r6sp+td3xb9zgA/5lanK9/aZMcAgk5pdi5f6eicec6qhBUHGdNl\nYDHpjSNV/LNO2qoD4/GWB3G3MhmMsQ9SMk0pO88vGv69GEmVkdIe/OMuA/bL\nZFk0\r\n=c7KR\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwOSPSrjcQLocUzSabWL1I4WVfqYfK6o5Ob1k4UUOgkwIgZrgz4voVl6rqRPbUsU1zIkBU9TwLDdar6v0JoeIFZQQ="}]},"_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-bar_0.26.0-canary.e1bcf14e.0_1640724374456_0.9174814200385153"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.b9d35b69.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.b9d35b69.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.b9d35b69.0","@material/mwc-tab":"0.26.0-canary.b9d35b69.0","@material/mwc-tab-scroller":"0.26.0-canary.b9d35b69.0","@material/tab":"=14.0.0-canary.c047f7c19.0","@material/tab-bar":"=14.0.0-canary.c047f7c19.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"8ee41fe865471367787d08d3f94d1800c5712d3b","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/8ee41fe865471367787d08d3f94d1800c5712d3b/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.b9d35b69.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-sM9USSn6i3D25yMcGB2dWMt2dsESTmUtwX0JCcesKEPgXPyqLQpo1lVNbgIoyCP+FfKJe216wYXBDkZqDayH2w==","shasum":"ab32da9078f360e6fbf83592cf7a20454b1a9b23","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.b9d35b69.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1eMoCRA9TVsSAnZWagAAjVgP/2fffL6nqypqGpZmdDsh\nYnCu3pkNvCgMwmlWrXmAeQdxW+VT52WEHd9LMM76ASCzaeuDRtWKVbVnpM2L\nl5HjyZW1QYUhACHvCbtXtZVf06wvQ9NZQ/fXP40vwdM/qDdolvPOsfDNwOeI\nURTiQG/DgVej0WQqM4Tc+17lBuR4iJ18pIUqGYQXmQ/bo3/2dRyTEvZkAJkc\n7qROlHS6/CDzNAcue8d4BvaXE3J9l637BGQrJaqT2LETFqXk9rB3JXLfm3O5\nID/f1kip/tRIN/gSml2Rnq6uHyvXoyskxdavtiaP+7DKnnQOq4vd8kdFF+C9\nhSFYlfeL1sB/DJVDoseLEz5Fncpm0OAYlxR8EZIDyC0F2QKUY5S3pOduI6GT\nDAE0ZeQNtsWPzAnZXCTvB84YQhudRD87m8lUvsyaxIwHmRaJcCmCMtkeFCc4\nOfAjoqGyr9kcK7XKroRsYQ2lGnOieFyyclBzrDW55uJMiNOohh/j2jPe9yJA\n1tRXFE7yf/2U6BKg57+JOGl1oua/rKqe+UT9cJd7CNMhQdbtfQPmO3qJ2qdu\nXWwm/WKLr5rAQhuH6byWVfHUt3CliOxJaOvbyfwvS+JXDKOcIZHSnxQSJGiR\nQnMpeJ2vdXmT4VeFCnuLF+3ICkKWvgpNkEYJmyjYkfy0yqWLgTFXabqwEmNc\nf8Z8\r\n=+0qP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICpA6qYlUygkIqUtna2Ao7MtSqNTV0KrQlywMhGQHd5GAiBwMJu/Tf6afVCeZMBHlAWgi/mTAHqzPS7RVl0B2pTw8Q=="}]},"_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-bar_0.26.0-canary.b9d35b69.0_1641407272865_0.9815329093696055"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.2afff08e.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.2afff08e.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.2afff08e.0","@material/mwc-tab":"0.26.0-canary.2afff08e.0","@material/mwc-tab-scroller":"0.26.0-canary.2afff08e.0","@material/tab":"=14.0.0-canary.05db65ec0.0","@material/tab-bar":"=14.0.0-canary.05db65ec0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"9bada09943cf93e3b0b697ef81fb87cc7b781379","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/9bada09943cf93e3b0b697ef81fb87cc7b781379/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.2afff08e.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-H3yaGqi1UT4ZufoRgRSCysJf1FO6UfKNMex/PnWeCwJ/MkTxr/MGRkzOo1T3jYxPY3BiPT6VFJGAY5S4xJqdUQ==","shasum":"fcca716293ddce3cb5081fdc02b82189560825ad","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.2afff08e.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh12viCRA9TVsSAnZWagAAt8IP/11MPjxbhidnDXNMJuCv\nzCZozFFKtgsoFSbTkt3CrLE/3Io2+J4tuMjVbOCZq4EI/bTt1xBIuAqVkyvl\nsCzinpf+ebeOu7axoe8GbEfHUkVVatKZjBWXX72Rt3Nj/G5zAuLPvnEcpxKK\n6EbEmVnzQWNp1Jd5dgYgOlFqxaxaGu82ZgivdpY3QnZ7t97oj7vQ0Irw5CTN\nVYnMjr1UZf7SA5JtmQ8MGDNFoo/9q1Yl6NoVOyZ3VwuQSIxpzXdO904qtnWz\ndZsYSCmQ/Mg8Dpvqhjo1JAKWpzVldd6yI5Pjrd0k4dbYF96cB02CIY5wfn7v\n5vT7RF3N0df3yo4VKnRdGuWXwUzYUvGGH6HKo+mJj8zebuimIvId3/CQbtEj\nGJefmJvsqLAGnqb1M8iFH6xeJEqcZs3HvmxB+vj6jrpNqNP4avOcL+nUqeV+\nFTyi+cIGzyidwxQ6kru2a0B6q/cZxRjSVnNCutkDR1mirPI1GT4pJI1N9pTx\nH7LaKVBW2qW6KYFZqcteF8kXeBVyWXlSssTh+lkX/KNty7f8Cbm7VmGk6TEM\npKkYZJnGLDjne2Mx5wL8zyeJzpq4jORXfLe4Qu1i0+bvaQYJNVN66eflUQtv\nYeoBA8JEszOp+arJ12u5hbeLAkeIyfukIDzNsjv4d1H86j0cCFgwD8++Hux9\nOphq\r\n=fVSt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFgpHaHW0JjkirDkbi5VDIYcMfhmwkwqyDrhlLk7rRWRAiAED5JO5tZaEToLpvDkyvDG/igLRun0Z1q07EWaKW74mQ=="}]},"_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-bar_0.26.0-canary.2afff08e.0_1641507810416_0.6042831333628791"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.893fc857.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.893fc857.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.893fc857.0","@material/mwc-tab":"0.26.0-canary.893fc857.0","@material/mwc-tab-scroller":"0.26.0-canary.893fc857.0","@material/tab":"=14.0.0-canary.6ca8b8f85.0","@material/tab-bar":"=14.0.0-canary.6ca8b8f85.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"6cbd6b098ea6e47fddfd2a5875df6d41262b532d","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6cbd6b098ea6e47fddfd2a5875df6d41262b532d/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.893fc857.0","_nodeVersion":"14.18.2","_npmVersion":"lerna/3.22.1/node@v14.18.2+x64 (linux)","dist":{"integrity":"sha512-+Jc3s/3zA1m0Mg6duMkAav/3FAxkX4rhzkJCP7HWGK09SFe+yxmUlxWISLCHP5JPQSgHcQi60XJJhrIWvnhx2Q==","shasum":"d32282dcb42c5c25622b0de0b8516098a05b9332","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.893fc857.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2IxrCRA9TVsSAnZWagAAOscQAJV3yrtrSwaT2rRiFLbs\neDza4BUdPSMZdmcBeghQLasmajVUKDzFkVibNwJz9HHRaVjF8iSeFC5pCRGg\nVLSrlzEURm2cPLzQ9C77/B05KEcBS5+T9cwBAbSxZTxV8P81Vdu3IyIolZZG\nFgiZ73Wo/kICGSEcGa8FchjrXlMza9QkrmkcpAGLCtri21I8GGXBg2SljUF2\nnkpBTgjhv2HjSGPqhlATH1sKUmIANk2OtOJLytFgdhkN4qebh7odYnLh0qUM\n2pkX2brcXyyy8agPvRpTyB3OT23joy8Tyjntuwo8RN5rSsnJUAkAoC7GJpIi\nVh8/IwWhLriHIxBS8ymHsb0kP+sFpHWnJxWS/DzAKXh61lzjMkNRjCz6RP49\nVlNyqGKsxRSgQX3exe4+Ug+Ik15rR6Jx9SdGVsUqnb22etzuunXl0p3f3/D2\n/ipNd+twvM0hIj6v9tX3v+cjDAi8C8jt3mRFeVfjMeJ3qyPh4KFOZ4r0z7zW\neH90oNIDJcfHSv0noV0i/srltROS4cCq9WMKzbyioIhbvGAyb2sMkKHn3+GR\n3Ic+Io8wlIod0LI7i5ynyQzuOfBUiZTJL7Qsd3WL2kDVfWFwCXPKYI+rQvFu\nZ9GiyT7FPh4X2ibxdKGsQUSljxy4b7QC45/JB6LmPMMFZD+r9IxfYUvIER4o\nlCfw\r\n=Cryc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCdFJ8hWOYf073ZMN7ngk5HhvrYubZgZ1Kc91FGZUK7fQIgMCHUgbxz0tzADF0cw323cpQnMl6s3ZmHQoLVPb5E/Qw="}]},"_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-bar_0.26.0-canary.893fc857.0_1641581675227_0.041886384488943884"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.69ba13b7.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.69ba13b7.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.69ba13b7.0","@material/mwc-tab":"0.26.0-canary.69ba13b7.0","@material/mwc-tab-scroller":"0.26.0-canary.69ba13b7.0","@material/tab":"=14.0.0-canary.c14e977ee.0","@material/tab-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"776b813e379c8d90abf2a0ded57168c12f62adff","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/776b813e379c8d90abf2a0ded57168c12f62adff/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.69ba13b7.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-5+aXrbNDfr19SzdH3VuCVa7PJevGcRVT6XVExR4kjtwTCes/w/zU+WyG0MN8GvI6F9UB/fe8OhEVgGq2icDsSw==","shasum":"db52f949210e0a0e11341163fc8510f3b7000ca0","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.69ba13b7.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6I+fCRA9TVsSAnZWagAADPgP/RZlz8MY9wDki3SQEXg6\npJ0Ll6b27nLIkonALrHzu/SHmpNepvMFQYpfTZXbE58lDjnsMxzt2d3w6YqH\new+TuQ2oREDT7hDoI+uxOBXFfYImoFYj+BvPRBAnaO9OQoGMBLBtmhEYcvi5\nIxDWaXEMmQyNvnKlLGLIdp1RPE5qbIg9SiujVxai5beAi8e4VsBfaOjwgkLL\n8KkzP2padG4SrLtoCbX5tYDIqcdyGpU9V9CvFwUKB/3EUJBDDBdjfjQ3TXlq\nEvf+x5OHKHqfZSPxYBhRBhVFBMpQMLooMeA++/h07uBBCTvkN4CqsI03Uur2\nF+RGfsqhgDActSMrGvoLUeVsHMjx4I2BtQ2tLDZLZL23TO+EbOb4pLE62lQ7\nCvm//Z5yM0QUBUeZ5N1O/K6TXpaa501Qx0dBE4iZ53fXd/GcQSObtSrc1ngn\n3GQJr85lgYdt9gUUdGKyglNGz9AIJ+oPAkSlvJAh83kBraF5BmS8PbkBVgAU\nw/kcQ+o2dy9jXyYCrPUPTAhICpHjRiekwXokpF9AJH9ncZ3ftxs+uNZ6+vgP\nAb9LE6QP/mspEE49pQjEPs7b5HZd/By01d/p2i2qMYoYY7f6ezW2Bwc7pMvF\nq2yDuirGxyrrW96bquE3ZCvUSo7ykad1HXCHNoJ4WIYhol4oqEIjAJRCE0nz\nRuB5\r\n=LGJ8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCetRz6sjQQYCE0XSRpyh7ygXda4ZwnKJhisLDKZMZU7wIgFdWOf7q+RSgIxCq8dh6ExI83I8FM3URfB01+KD77EM4="}]},"_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-bar_0.26.0-canary.69ba13b7.0_1642631071422_0.01523227074829503"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0-canary.0af8ade5.0":{"name":"@material/mwc-tab-bar","version":"0.26.0-canary.0af8ade5.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"0.26.0-canary.0af8ade5.0","@material/mwc-tab":"0.26.0-canary.0af8ade5.0","@material/mwc-tab-scroller":"0.26.0-canary.0af8ade5.0","@material/tab":"=14.0.0-canary.c14e977ee.0","@material/tab-bar":"=14.0.0-canary.c14e977ee.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"64bb121cb77aee6a854395ad838fce32a6051337","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar';\n  import '@material/mwc-tab';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/64bb121cb77aee6a854395ad838fce32a6051337/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0-canary.0af8ade5.0","_nodeVersion":"14.18.3","_npmVersion":"lerna/3.22.1/node@v14.18.3+x64 (linux)","dist":{"integrity":"sha512-ZP+U4MSsO09j9ssbTSX80xswn549rush5s84nd5DugMusejmTkD2M7wCv0uxn79lW6mlBguMdRj6ZQvpn7vNIA==","shasum":"1bc866665182d22756be563f9bfa23c862ce7d19","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0-canary.0af8ade5.0.tgz","fileCount":15,"unpackedSize":44662,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAZe8CRA9TVsSAnZWagAAL9UP/3qlRNAF+NIdksn5O6Ox\nfCIDZN14M1tGY3Dyqla8VfobnG2OVqmm6ylXt/iEudDpfh2/HksG7AEX0Qly\nc5CaWTzk4Txg2KwWleOIQM6nOaiJY6UZZru1L31NeIAjieWlwiPVXz7nOow/\nqApHhke4YcN3UCp0jMVq/1bSSH7IwcJUrNNyHwpJn6IpbebGRMGNXGFp+PtO\nTuN/1qCdPW7b8XLXVQQGydYxG3JhzO4Vkre+m95F2q8mEjHHhyF2bD48lExE\nj3W3tr2KIaj1Omk6pmVD40+RKLithv34GKBZKD5CHnsnL/MxwuFd/W36W5/G\nVCfy/wP6yx0J24ZrstLzr+nTZCSuGeiHJkyPh90T+g3h9xjGEXIUQTS2cssn\nq1DA6BHXAudOUO0459M6/O2JPXSJrSAB8J4GyUP5c7As8H0HhH0tHEKITP2G\nadSfvVcmX6bMMuLqpGS+6ITOThvOqDPZvhGeDAiELQNhouSAoyRXGO7tIS4d\n6Ku9gYeBJuZ/4ZXdH2tY0zX6UaE4DT0b6xwzQLZNqi6VXNKYYs3V53vw16O1\nzYSDgGBK9Kqi0mmWG92HhLzpN4L5Oui/Y9uxVOhSA/RbVuSS0d+czobsXmXR\nvCYlKE8RHcAKfWJMoH3sLTTYGsTcaaukpZ1DvUeagVOPaAaWJim2xy7hijFR\nSEfL\r\n=iHZX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDuvkgG3ddcdKJqbkUXe+gK1cY4lkDGoDT4vdSOtX8lswIhAJ2ZvevCD+0QBHcQOP2nQ5194GnMmGqohA1LOWPKvW11"}]},"_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-bar_0.26.0-canary.0af8ade5.0_1644271548324_0.17032030538901122"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.0":{"name":"@material/mwc-tab-bar","version":"0.26.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.0","@material/mwc-tab":"^0.26.0","@material/mwc-tab-scroller":"^0.26.0","@material/tab":"=14.0.0","@material/tab-bar":"=14.0.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"056b3ceffbe2fe3408dbdbb319932da85637e779","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.0","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-T1zE05TxBYSR1yAXY+3BF80YPF7rVlmdJXGJTAvaCGMzF62tcJr7CXP3SIQCaRSzSsnzZfltpmrMBUNkrGMzXQ==","shasum":"a797491d6da947b4092c4eeddc9497a140e1b9aa","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.0.tgz","fileCount":15,"unpackedSize":44540,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDrWckAR9U1uVhOwhtDcIX9XpApeqTD91v+wfsyRSmHPAiATKqiMY7ye9yLPKRCGAbfk0p9wixS6eagdvg3hqZ9+YA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJicWa+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoguBAAi869njSpwXslDZxnTu2d/gTHJ0H1kbaQe0cyCbMlnb98aTKw\r\nG5SGsPA3nWvQmITeMOAbGbsOUQQK6Tql3QsxFauG8aw+3GBvj6ckc5pfw4gw\r\nYGzS7ohGcu2zvMgP6+U4I3JcFonEQGIY604Nt5ICBVjsdD0jmmoYaO8vnROF\r\nN1w2ry2ooG4yTtNmUCqD/utflYRISLAq2ZYESh4NAMVzxGNyWOywpPWUNDjw\r\n4XPMy5aUnztB2WVftQcqnQeKl3c2bWnnfueW5qJKpe7f+kpcUMhOUG69LkJm\r\nDl37x3bP00THwARDA3O0BMY7G6PSlLfvZqt9uFJfvL8LWAogkgOcRDQx0N3R\r\nYw4mxJjczJ9c3yO+2E8qdzMCLdG+drSbuJ1ac6U50bsj6vvbs6mKIDmD3SIn\r\nzHSYQlaxkoJrokr0EwmxuBDoOjafLeyR61/sF5QsMctrIkkL1rXwx1C1MuOJ\r\nqVMzaQyC3mvS/gxC9/cS1eCwAt9ZBmIbBmo7cZrSBZQDC30sarsFZd3n9mVM\r\n7OU3xTUPBgcw/SmqpVKT6WVdQbSA4kvQtauuuFhBCsQENoxCXp3mdEsanZX9\r\nkQ3uCI4cny0nPcYuh1e7D1aX8/dBNC+lRMCZDQ81stdIln7ohZZNgrF/pxY/\r\njaYAjHASmSzj1N8NF+lmxh25S4Qr552Kh3g=\r\n=LxKC\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-bar_0.26.0_1651599038173_0.22083271244590064"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.26.1":{"name":"@material/mwc-tab-bar","version":"0.26.1","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.26.1","@material/mwc-tab":"^0.26.1","@material/mwc-tab-scroller":"^0.26.1","@material/tab":"=14.0.0-canary.53b3cad2f.0","@material/tab-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"06b516b7f91867acd0cbe5676767aea8f490cbee","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.26.1","_nodeVersion":"16.14.2","_npmVersion":"lerna/3.22.1/node@v16.14.2+x64 (darwin)","dist":{"integrity":"sha512-QAbU6WphHkH+oaZ4LEzRJlNeS6iZdupEW9HWWCX2zmMIi6NotgmtnzHK0w6rk+L67fvjH2fhdL4B8ftGePy6aw==","shasum":"f37168c4d924c6af0939d134e9cd795c8dfbba3c","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.26.1.tgz","fileCount":15,"unpackedSize":44828,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTycjHuUnFXC+L4heBwKtUACBwRO4rTXHR4lqtBag66QIhAJkA5QJpjDwetVg1thQHk4MA4h7cUGQmTehC4g/bDuxl"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieXo9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBKA//SNiAvTiaaG2YcWgLw7/zROwfMc2h4Of06Hq/MkQ6O5pKwNuD\r\nRENv/E4aFVg/st69OJDRZ/+5oUlrCOY1IzZNIUVs3Pl5/v+tfr247Y9LMboa\r\nnKfdk1lvNUDTX1QS7LFkPCgGoAg5Mgy2X8w964kfZxuBii0I0qeDIJID969v\r\nNwKzyDHE/D+XvtRCwApw9uuyTbm9zw6Vxu/AaMMnmarCQ+dwXv9xP1OBumpz\r\nslIOqQsLMGM8iJ3FEHygJ4GN0x3fX+n2U+dkQTpkZ+ojHjOO4SfDa+yqncNm\r\n3OWZTeOQ2iXkASDtryjmTJ8slT5MtDaGKxbMYNbdAHgIffbshw5yokdpUwik\r\nlsG2rv41OpEesIGYD9csZSxxID0y9P1shqphy27N9dF/If6r/+9UTlhGrxs/\r\np15pifd0SujccnpEsP4hp5bFho2WLmioTxkfoGVGbSC7yGM5UNmdEc+eqXKJ\r\nPciNoeRSOe29yPUjwTWUx8KOZN0oLDnoSZ5Y7lfLEH6AtUfwB07VHWTWty+n\r\nuYxctAU5sjts8/kiLhlPGfU/g5vK6VBr06S9GkCj8H1dmNk4PgTJxYNHp5Z/\r\nO3iFv06OfQZ74O1svtVcGVqcuHrfDWLBPkfmjoAGr1Wf7iRWHMoxwshyWsWl\r\nhTcDCfBiWaJ3Vz5sJ1lf/EyQg5ecsMZD2vo=\r\n=D/yQ\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-bar_0.26.1_1652128317085_0.25067421823772107"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"},"0.27.0":{"name":"@material/mwc-tab-bar","version":"0.27.0","description":"Material Design tab bar web component","keywords":["material design","web components","tab bar"],"main":"mwc-tab-bar.js","module":"mwc-tab-bar.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"license":"Apache-2.0","dependencies":{"@material/mwc-base":"^0.27.0","@material/mwc-tab":"^0.27.0","@material/mwc-tab-scroller":"^0.27.0","@material/tab":"=14.0.0-canary.53b3cad2f.0","@material/tab-bar":"=14.0.0-canary.53b3cad2f.0","lit":"^2.0.0","tslib":"^2.0.1"},"scripts":{"build:style":"node ../../scripts/sass-to-lit-css/index.js mwc-tab-bar.scss"},"publishConfig":{"access":"public"},"gitHead":"c1e876a15bc028034781984538ea803ba67dbed3","bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"homepage":"https://github.com/material-components/material-components-web-components#readme","_id":"@material/mwc-tab-bar@0.27.0","_nodeVersion":"18.6.0","_npmVersion":"lerna/3.22.1/node@v18.6.0+arm64 (darwin)","dist":{"integrity":"sha512-CqRZ38m8kOfSJo87Ek61eubO8AGR10Dp12c3pCyyy6mtK/0FSY+rfcmnMPxEzkxREqUnQPgw9lhqmGZXBSqzZQ==","shasum":"a7eb0d576d90fdf5a7ff4deceddfcacb583da168","tarball":"https://registry.npmjs.org/@material/mwc-tab-bar/-/mwc-tab-bar-0.27.0.tgz","fileCount":15,"unpackedSize":44828,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDu1gXzK1/UnAyWMSh5MWFUCIK78G8YDLD9SMGOfVz4jQIhAOUQ4RBXpoffrNRMrYkHTkQzmgg5tTc75cdpNPlcTVbS"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9qYOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIpw//SiH2tSb11lFLgVus7SkQRMoDdM1yJ/fGnR5qhumswcoXJrnQ\r\nKaAktUnkbk52gtnDPq3y1zJvB3IzHDkq0/wBDsD/wTi22jwA2FeeV+A6zE56\r\nXqqTESL9trEdUXO/StfsZyHqFh8plxZ2oOC5mI9o3m1+ETUl/9g8PooiSJT/\r\nzc/4xrYOaK8R2l4gXsEr1r9h7v1yQcTKF7jIm6pl383uDGr1mEFmI3vmXsy3\r\nrQ1ddEwI1P1iTSVzLtJYxR2lSc9GzspkKrDyofogioaaiqUoj4GT9KyUulBT\r\nuwX+YXrTL3qmpLgKcwMs4HXBeFdHm2kdrOyhqAWWbhhuV6XJaERzfGK2YXrf\r\nRXY+bjMa66cr26c/XeeLFAsSC9DpKH8/K7XewaoypvQGDTdj7S1ZI+xNuU7O\r\nSyAO6AbwoJE9l0SR+8WiMgzcJxtLrDOFzRlhHgrTL3nAlRjdDfK7pbMrRpJn\r\niXm/NSYpsiaWeVGs8Yl7tQZwJllNBQG/ENeh4Di3R+RHdjD1GJFQAo1ppK8H\r\n6p3qpfiTiMLqqY1NNsL3WRzioxFuBt61GCdamKhtndNMNnreyxnxC5Hme1oI\r\n+aweVjPc42rPGP+ucYvl3pZMotpNloKiGe4zGA3Zyihbc3RtJMPMdrz3S0vQ\r\nRcPxB+qybppO1rA2DGNkhTG2tROjvNXgjA8=\r\n=g2jw\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-bar_0.27.0_1660331534177_0.7469031736836027"},"_hasShrinkwrap":false,"deprecated":"MWC beta is longer supported. Please upgrade to @material/web"}},"time":{"created":"2019-06-05T22:20:31.037Z","0.6.0":"2019-06-05T22:20:31.219Z","modified":"2024-04-04T18:57:29.804Z","0.7.0":"2019-08-27T21:23:59.881Z","0.7.1":"2019-08-28T02:54:35.430Z","0.8.0":"2019-09-04T00:05:00.047Z","0.9.0":"2019-09-27T01:36:29.163Z","0.9.1":"2019-09-30T21:05:25.625Z","0.10.0":"2019-10-11T23:28:29.817Z","0.11.0":"2019-11-26T21:49:42.507Z","0.11.1":"2019-11-27T00:26:52.568Z","0.12.0":"2019-12-17T23:48:05.330Z","0.13.0":"2020-02-04T04:46:48.146Z","0.14.0-canary.f790f713.0":"2020-02-28T02:28:45.836Z","0.14.0-canary.c759cfbc.0":"2020-02-29T00:05:22.804Z","0.14.0-canary.97ef53d8.0":"2020-02-29T00:18:43.324Z","0.14.0-canary.24f5fa6e.0":"2020-02-29T01:09:08.424Z","0.14.0-canary.960e214f.0":"2020-02-29T03:09:27.952Z","0.14.0-canary.a2f046f5.0":"2020-03-03T00:57:10.257Z","0.14.0-canary.024f371a.0":"2020-03-03T01:29:23.905Z","0.14.0-canary.2f164110.0":"2020-03-03T21:34:11.041Z","0.14.0-canary.edd465cd.0":"2020-03-04T00:11:08.261Z","0.14.0-canary.2b02d017.0":"2020-03-04T20:19:37.063Z","0.14.0-canary.cbdfe453.0":"2020-03-04T21:45:01.217Z","0.14.0-canary.02aa8a98.0":"2020-03-06T22:53:49.456Z","0.14.0-canary.7cd5aad6.0":"2020-03-09T23:20:38.637Z","0.14.0-canary.3a79dfa6.0":"2020-03-10T02:56:40.874Z","0.14.0-canary.22e0f5c9.0":"2020-03-10T03:00:42.218Z","0.14.0-canary.f23a1d1b.0":"2020-03-10T20:56:57.996Z","0.14.0-canary.34b2d69a.0":"2020-03-10T21:15:12.192Z","0.14.0-canary.dc04abe1.0":"2020-03-10T22:02:46.048Z","0.14.0-canary.04ccbc88.0":"2020-03-11T00:35:17.063Z","0.14.0-canary.55338c25.0":"2020-03-11T06:31:54.047Z","0.14.0-canary.b7e388f3.0":"2020-03-11T20:20:08.258Z","0.14.0-canary.b3211481.0":"2020-03-11T20:24:21.853Z","0.14.0-canary.0b5c7f23.0":"2020-03-11T21:54:14.889Z","0.14.0-canary.6c0f0b27.0":"2020-03-12T21:17:35.484Z","0.14.0-canary.b6c53425.0":"2020-03-13T16:55:44.843Z","0.14.0-canary.306cabed.0":"2020-03-17T21:18:05.092Z","0.14.0-canary.4e250cbc.0":"2020-03-17T21:24:17.029Z","0.14.0-canary.ff82d9ec.0":"2020-03-18T18:20:07.796Z","0.14.0-canary.f50f48ef.0":"2020-03-19T18:55:47.827Z","0.14.0-canary.134cf877.0":"2020-03-19T20:39:40.487Z","0.14.0":"2020-03-19T21:28:50.644Z","0.15.0-canary.2c1a4913.0":"2020-03-19T23:01:15.812Z","0.15.0-canary.3a6e481a.0":"2020-03-20T18:13:35.448Z","0.15.0-canary.603d6eb3.0":"2020-03-20T21:36:15.635Z","0.15.0-canary.05c6a93c.0":"2020-03-23T16:36:50.322Z","0.14.1":"2020-03-23T17:57:47.363Z","0.15.0-canary.4e6be3f4.0":"2020-03-24T20:59:15.243Z","0.15.0-canary.c29a683d.0":"2020-03-24T21:16:59.471Z","0.15.0-canary.fca3dd9d.0":"2020-03-24T23:43:28.989Z","0.15.0-canary.1e73da49.0":"2020-03-25T21:30:21.550Z","0.15.0-canary.bb6dfc5a.0":"2020-03-27T01:23:29.393Z","0.15.0-canary.1884603d.0":"2020-03-27T19:55:54.480Z","0.15.0-canary.aff73cab.0":"2020-03-27T21:14:39.024Z","0.15.0-canary.63168f61.0":"2020-03-31T18:12:50.515Z","0.15.0-canary.9fb79b3e.0":"2020-03-31T21:20:40.045Z","0.15.0-canary.9bd3e9e2.0":"2020-04-01T00:16:31.911Z","0.15.0-canary.072084ab.0":"2020-04-01T18:40:15.869Z","0.15.0-canary.4dec04af.0":"2020-04-03T20:30:09.673Z","0.15.0-canary.9b676354.0":"2020-04-03T20:30:32.113Z","0.15.0-canary.6b946095.0":"2020-04-03T21:24:33.599Z","0.15.0-canary.5ccbfaa2.0":"2020-04-03T21:30:11.056Z","0.15.0-canary.a0ab8772.0":"2020-04-07T20:09:15.937Z","0.15.0-canary.8d352305.0":"2020-04-07T21:42:28.194Z","0.15.0-canary.31eac79f.0":"2020-04-07T21:57:46.692Z","0.15.0-canary.ba05565e.0":"2020-04-08T17:32:54.969Z","0.15.0-canary.25099f79.0":"2020-04-08T21:31:03.184Z","0.15.0-canary.447e31c6.0":"2020-04-09T01:16:55.980Z","0.15.0-canary.d6dd84f7.0":"2020-04-09T01:25:30.230Z","0.15.0-canary.9b03ee68.0":"2020-04-09T20:03:12.748Z","0.15.0-canary.bbc25b10.0":"2020-04-10T22:46:02.202Z","0.15.0-canary.339cbfd4.0":"2020-04-15T17:39:05.312Z","0.15.0-canary.b74ff19f.0":"2020-04-15T20:04:46.665Z","0.15.0-canary.aaa16853.0":"2020-04-15T22:41:22.464Z","0.15.0-canary.826b23e7.0":"2020-04-16T18:57:31.580Z","0.15.0-canary.e1ad2b2f.0":"2020-04-17T23:01:50.312Z","0.15.0-canary.bade5580.0":"2020-04-17T23:19:38.274Z","0.15.0-canary.dae38247.0":"2020-04-18T00:16:31.366Z","0.15.0-canary.a04c0b82.0":"2020-04-18T00:34:40.647Z","0.15.0-canary.715decfe.0":"2020-04-20T18:35:50.754Z","0.15.0-canary.c862cd04.0":"2020-04-20T21:34:28.428Z","0.15.0-canary.e9b01b35.0":"2020-04-20T23:29:49.664Z","0.15.0-canary.ee7e8989.0":"2020-04-21T00:51:41.070Z","0.15.0-canary.9bf47ffa.0":"2020-04-21T18:38:41.094Z","0.15.0-canary.078dbd98.0":"2020-04-21T21:12:40.745Z","0.15.0-canary.953015d6.0":"2020-04-21T21:36:02.796Z","0.15.0-canary.c360ec63.0":"2020-04-21T21:59:21.540Z","0.15.0-canary.d71b65aa.0":"2020-04-21T22:38:04.217Z","0.15.0-canary.58d51135.0":"2020-04-23T00:45:17.572Z","0.15.0-canary.d0af8ba3.0":"2020-04-23T18:10:21.187Z","0.15.0-canary.8872b17b.0":"2020-04-23T20:41:24.596Z","0.15.0-canary.eca1a610.0":"2020-04-23T21:43:25.487Z","0.15.0-canary.baaf529e.0":"2020-04-23T22:44:44.582Z","0.15.0-canary.7a7992a8.0":"2020-04-23T23:14:42.876Z","0.15.0-canary.1150d64d.0":"2020-04-24T00:19:00.714Z","0.15.0-canary.dad3f828.0":"2020-04-25T00:43:06.900Z","0.15.0-canary.1bcdb47e.0":"2020-04-28T01:13:05.094Z","0.15.0-canary.86ff1b9f.0":"2020-04-28T02:56:08.440Z","0.15.0-canary.54a86b20.0":"2020-04-28T03:18:25.845Z","0.15.0-canary.938fd24b.0":"2020-04-30T01:27:35.475Z","0.15.0-canary.39e9a008.0":"2020-04-30T02:13:55.540Z","0.15.0-canary.f3b365de.0":"2020-04-30T08:27:45.923Z","0.15.0-canary.cdbdf807.0":"2020-05-01T00:15:10.704Z","0.15.0-canary.9995ae17.0":"2020-05-01T18:45:33.389Z","0.15.0-canary.457bf035.0":"2020-05-01T20:51:16.919Z","0.15.0-canary.2381fd02.0":"2020-05-01T21:26:01.150Z","0.15.0-canary.b2ca9b57.0":"2020-05-01T21:36:39.125Z","0.15.0-canary.b2b088e7.0":"2020-05-01T22:34:04.787Z","0.15.0-canary.fdd8f69e.0":"2020-05-02T00:16:52.950Z","0.15.0-canary.730f45a8.0":"2020-05-03T20:45:16.966Z","0.15.0-canary.4219bd20.0":"2020-05-04T23:32:35.486Z","0.15.0-canary.1d83cf6d.0":"2020-05-05T17:12:32.101Z","0.15.0-canary.3bfc63aa.0":"2020-05-05T18:14:09.582Z","0.15.0":"2020-05-05T22:36:22.572Z","0.16.0-canary.1f4e3d1c.0":"2020-05-06T22:04:53.200Z","0.16.0-canary.bc8759d5.0":"2020-05-07T23:15:09.781Z","0.16.0-canary.d1379acf.0":"2020-05-08T17:41:39.327Z","0.16.0-canary.58d51fc0.0":"2020-05-08T19:17:55.093Z","0.16.0-canary.588062d7.0":"2020-05-08T21:24:15.074Z","0.16.0-canary.fa21f639.0":"2020-05-11T17:30:29.222Z","0.16.0-canary.2772c509.0":"2020-05-11T18:37:06.546Z","0.16.0-canary.fc4796d5.0":"2020-05-11T20:05:51.236Z","0.16.0-canary.0d1c5f2c.0":"2020-05-11T21:20:12.155Z","0.16.0-canary.d083d93a.0":"2020-05-12T00:18:38.336Z","0.16.0-canary.c95d429c.0":"2020-05-12T21:37:23.593Z","0.16.0-canary.0c1ad726.0":"2020-05-13T00:34:38.580Z","0.16.0-canary.8b6a4700.0":"2020-05-13T17:19:52.308Z","0.16.0-canary.3270effb.0":"2020-05-13T21:25:01.468Z","0.16.0-canary.832e64f7.0":"2020-05-14T00:52:32.783Z","0.16.0-canary.472fc4fc.0":"2020-05-14T03:36:41.558Z","0.16.0-canary.4dcd7dd5.0":"2020-05-14T16:25:33.340Z","0.16.0-canary.bcd3400d.0":"2020-05-15T22:50:17.067Z","0.16.0-canary.91f63179.0":"2020-05-16T00:34:55.152Z","0.16.0-canary.b8aafb56.0":"2020-05-18T18:32:04.174Z","0.16.0-canary.a564b194.0":"2020-05-18T23:04:00.237Z","0.16.0-canary.ef56465b.0":"2020-05-19T03:48:20.674Z","0.16.0-canary.c22dcd71.0":"2020-05-19T17:24:49.772Z","0.16.0-canary.6eb62388.0":"2020-05-19T20:38:48.741Z","0.16.0-canary.9bc3230c.0":"2020-05-19T21:39:18.468Z","0.16.0-canary.421a6856.0":"2020-05-20T05:24:36.839Z","0.16.0-canary.761aa6f2.0":"2020-05-20T21:31:30.102Z","0.16.0-canary.f8654c40.0":"2020-05-20T21:40:46.783Z","0.16.0-canary.05f3853e.0":"2020-05-21T17:33:40.343Z","0.16.0-canary.5fe61f4e.0":"2020-05-21T23:08:04.014Z","0.16.0-canary.17d33745.0":"2020-05-26T16:14:13.681Z","0.16.0-canary.e8b52f5b.0":"2020-05-26T18:43:14.491Z","0.16.0-canary.09afa0a9.0":"2020-05-26T21:44:30.428Z","0.16.0-canary.58bc9166.0":"2020-05-27T00:30:42.434Z","0.16.0-canary.43bde144.0":"2020-05-27T18:29:37.606Z","0.16.0-canary.51067bbc.0":"2020-05-27T20:03:35.216Z","0.16.0-canary.92751ffa.0":"2020-05-27T21:36:52.352Z","0.16.0-canary.aa2b40bb.0":"2020-05-28T19:15:24.898Z","0.16.0-canary.1a870a01.0":"2020-05-28T21:18:59.354Z","0.16.0-canary.ad57d086.0":"2020-05-29T23:49:33.065Z","0.16.0-canary.3bf2b4d5.0":"2020-05-30T00:37:09.181Z","0.16.0-canary.ac05f090.0":"2020-05-30T02:50:10.349Z","0.16.0-canary.0ba7b095.0":"2020-05-30T02:56:52.675Z","0.16.0-canary.5eaa9bac.0":"2020-06-01T23:29:20.057Z","0.16.0-canary.5677ac20.0":"2020-06-01T23:58:06.142Z","0.16.0-canary.7ac6bff4.0":"2020-06-02T00:16:03.963Z","0.16.0-canary.d45622aa.0":"2020-06-02T23:46:16.113Z","0.16.0-canary.dc26c709.0":"2020-06-05T20:21:22.182Z","0.16.0-canary.b9baf6db.0":"2020-06-05T20:22:46.052Z","0.16.0-canary.e0b8c9d0.0":"2020-06-05T23:05:17.440Z","0.16.0-canary.51552859.0":"2020-06-10T00:08:35.623Z","0.16.0-canary.2e269285.0":"2020-06-10T01:36:06.322Z","0.16.0-canary.be138b01.0":"2020-06-10T20:49:35.172Z","0.16.0-canary.04bccf5a.0":"2020-06-16T00:59:26.338Z","0.16.0-canary.b44dea36.0":"2020-06-16T20:58:16.870Z","0.16.0-canary.e2577e87.0":"2020-06-16T21:09:01.629Z","0.16.0-canary.58b73343.0":"2020-06-16T21:24:03.879Z","0.16.0-canary.f155c058.0":"2020-06-18T18:08:12.008Z","0.16.0-canary.309779d2.0":"2020-06-18T23:59:01.140Z","0.16.0-canary.e7649968.0":"2020-06-19T21:41:05.718Z","0.16.0-canary.8e21c78b.0":"2020-06-22T10:38:05.992Z","0.16.0-canary.6db76faf.0":"2020-06-22T21:13:04.839Z","0.16.0-canary.c4dd9684.0":"2020-06-23T15:15:33.907Z","0.16.0-canary.b3e53981.0":"2020-06-24T00:39:41.207Z","0.16.0-canary.b9468f77.0":"2020-06-24T21:54:45.865Z","0.16.0-canary.eb790e49.0":"2020-06-25T21:19:19.155Z","0.16.0-canary.9aa1a5c5.0":"2020-06-26T17:05:37.773Z","0.16.0-canary.d36e9861.0":"2020-06-26T17:36:48.832Z","0.16.0-canary.155c2f85.0":"2020-06-26T23:30:35.989Z","0.16.0-canary.340c9c40.0":"2020-06-26T23:38:37.984Z","0.16.0-canary.a3384d2d.0":"2020-06-30T21:00:49.099Z","0.17.0-canary.6d056c96.0":"2020-06-30T21:10:10.089Z","0.16.1":"2020-06-30T21:14:59.318Z","0.17.0-canary.f7e37607.0":"2020-06-30T21:44:35.784Z","0.17.0":"2020-07-01T19:44:30.392Z","0.18.0-canary.0afbfef2.0":"2020-07-01T19:45:05.156Z","0.18.0-canary.fd970958.0":"2020-07-01T23:33:51.921Z","0.18.0-canary.fd44be19.0":"2020-07-02T05:48:54.809Z","0.17.2":"2020-07-02T05:58:31.332Z","0.18.0-canary.ca6fc6de.0":"2020-07-02T05:59:44.451Z","0.18.0-canary.79f1ec2a.0":"2020-07-07T17:33:03.224Z","0.18.0-canary.a7bc45ae.0":"2020-07-09T17:23:41.218Z","0.18.0-canary.b184bc1c.0":"2020-07-09T17:32:50.955Z","0.18.0-canary.b39fde62.0":"2020-07-09T17:38:04.324Z","0.18.0-canary.dfdd8d6c.0":"2020-07-09T18:26:10.116Z","0.18.0-canary.11cf2694.0":"2020-07-09T20:43:55.619Z","0.18.0-canary.436d66e9.0":"2020-07-09T20:48:42.528Z","0.18.0-canary.3a44d36b.0":"2020-07-10T00:37:46.230Z","0.18.0-canary.ec11ae6e.0":"2020-07-10T17:53:28.697Z","0.18.0-canary.17f6cf27.0":"2020-07-10T18:33:12.143Z","0.18.0-canary.efdfbc21.0":"2020-07-10T18:45:00.091Z","0.18.0-canary.bae4339a.0":"2020-07-14T16:42:23.403Z","0.18.0-canary.28eac13b.0":"2020-07-14T22:23:49.048Z","0.18.0-canary.44966b65.0":"2020-07-15T18:05:27.815Z","0.18.0-canary.3ef0ef60.0":"2020-07-16T16:55:12.880Z","0.18.0-canary.fcebf9e6.0":"2020-07-20T18:46:26.457Z","0.18.0-canary.b6a772df.0":"2020-07-20T22:46:58.773Z","0.18.0-canary.f6a6ca38.0":"2020-07-21T16:41:16.271Z","0.18.0-canary.647dd6b7.0":"2020-07-21T18:44:49.541Z","0.18.0-canary.3cb7406f.0":"2020-07-22T18:57:56.920Z","0.18.0-canary.5717a5a1.0":"2020-07-22T21:40:17.315Z","0.18.0-canary.d84cd4b2.0":"2020-07-22T21:42:19.493Z","0.18.0-canary.f279e7fc.0":"2020-07-22T22:01:10.355Z","0.18.0-canary.f181e3bc.0":"2020-07-22T22:03:07.628Z","0.18.0-canary.346a622a.0":"2020-07-22T23:40:21.693Z","0.18.0-canary.c9e8a848.0":"2020-07-23T01:10:47.613Z","0.18.0-canary.718c385c.0":"2020-07-23T20:06:56.027Z","0.18.0-canary.cd516a27.0":"2020-07-24T19:11:17.154Z","0.18.0-canary.1f082191.0":"2020-07-24T19:16:35.390Z","0.18.0-canary.ea3e82dc.0":"2020-07-24T19:21:44.786Z","0.18.0-canary.94987b64.0":"2020-07-24T20:26:56.593Z","0.18.0-canary.ff49b7e2.0":"2020-07-27T19:05:14.792Z","0.18.0-canary.3d334ccc.0":"2020-07-28T16:15:38.991Z","0.18.0-canary.82ac569e.0":"2020-07-28T18:42:53.054Z","0.18.0-canary.99df7397.0":"2020-07-29T02:40:59.799Z","0.18.0-canary.45493e05.0":"2020-07-29T17:17:03.995Z","0.18.0-canary.f2ab0a95.0":"2020-07-29T17:21:58.131Z","0.18.0-canary.45f9eddc.0":"2020-07-30T00:55:17.345Z","0.18.0-canary.b64663ea.0":"2020-07-30T17:43:41.436Z","0.18.0-canary.9a1a4d2d.0":"2020-07-30T21:04:43.897Z","0.18.0-canary.887c2848.0":"2020-07-30T22:06:02.864Z","0.18.0-canary.354eb695.0":"2020-07-30T23:58:19.427Z","0.18.0-canary.7beb236c.0":"2020-07-31T17:41:00.478Z","0.18.0-canary.c44acc0c.0":"2020-07-31T21:11:36.143Z","0.18.0-canary.779853ff.0":"2020-08-03T17:24:07.073Z","0.18.0-canary.8aaf270b.0":"2020-08-03T18:41:13.825Z","0.18.0-canary.5cde9f12.0":"2020-08-03T19:01:39.401Z","0.18.0-canary.1607ec53.0":"2020-08-03T19:47:15.525Z","0.18.0-canary.678b30e3.0":"2020-08-03T19:51:05.329Z","0.18.0-canary.21c55569.0":"2020-08-03T19:57:10.714Z","0.19.0-canary.907d4d7d.0":"2020-08-03T21:22:58.570Z","0.18.0":"2020-08-03T21:24:34.694Z","0.19.0-canary.f7958e4a.0":"2020-08-04T02:07:22.039Z","0.19.0-canary.f8ceaf79.0":"2020-08-04T19:18:36.827Z","0.19.0-canary.6b9e385a.0":"2020-08-04T21:30:17.564Z","0.19.0-canary.9a7e6d2a.0":"2020-08-05T03:46:28.568Z","0.19.0-canary.188f3f1c.0":"2020-08-05T18:13:54.436Z","0.19.0-canary.b6106add.0":"2020-08-05T20:49:58.987Z","0.19.0-canary.ebb4c667.0":"2020-08-06T00:19:17.965Z","0.19.0-canary.aa44289e.0":"2020-08-06T18:27:52.656Z","0.19.0-canary.e6b0816b.0":"2020-08-07T18:44:20.691Z","0.19.0-canary.96d15938.0":"2020-08-07T20:29:28.364Z","0.19.0-canary.9d991c8c.0":"2020-08-07T22:08:58.998Z","0.19.0-canary.13bfbd72.0":"2020-08-10T19:27:53.131Z","0.19.0-canary.30b1b258.0":"2020-08-10T20:07:28.446Z","0.19.0-canary.1583e263.0":"2020-08-11T23:11:15.264Z","0.19.0-canary.fefb1a93.0":"2020-08-12T00:25:37.809Z","0.19.0-canary.1ac5b9d4.0":"2020-08-12T18:27:54.967Z","0.19.0-canary.f17f5052.0":"2020-08-13T17:15:03.846Z","0.19.0-canary.80b5d20d.0":"2020-08-13T18:17:47.286Z","0.19.0-canary.758635ed.0":"2020-08-14T17:17:16.406Z","0.19.0-canary.18d6b808.0":"2020-08-14T23:08:32.334Z","0.19.0-canary.5f8ffbd1.0":"2020-08-17T22:16:09.600Z","0.19.0-canary.8604d59e.0":"2020-08-18T01:03:12.653Z","0.19.0-canary.1d7d5e34.0":"2020-08-18T01:09:31.992Z","0.19.0-canary.9cc95c07.0":"2020-08-18T01:17:08.618Z","0.19.0-canary.9f65ced3.0":"2020-08-18T20:16:46.815Z","0.19.0-canary.5962b365.0":"2020-08-19T20:29:36.644Z","0.19.0-canary.9c9ec756.0":"2020-08-20T18:56:24.350Z","0.19.0-canary.fa0ad66a.0":"2020-08-20T20:35:30.664Z","0.19.0-canary.06ecdd6b.0":"2020-08-20T21:34:28.217Z","0.19.0-canary.2bca2318.0":"2020-08-21T17:53:02.397Z","0.19.0-canary.6aa47265.0":"2020-08-21T18:16:46.349Z","0.19.0-canary.e7202a07.0":"2020-08-21T19:24:13.217Z","0.19.0-canary.f208201e.0":"2020-08-24T19:03:42.618Z","0.19.0-canary.14a172db.0":"2020-08-25T19:48:23.147Z","0.19.0-canary.e6c1038d.0":"2020-08-27T19:37:36.851Z","0.19.0-canary.34012082.0":"2020-08-27T19:49:02.348Z","0.19.0-canary.c073f7b8.0":"2020-08-28T17:12:41.052Z","0.19.0-canary.b7ae68ff.0":"2020-08-29T01:27:35.900Z","0.19.0-canary.697e3879.0":"2020-09-02T00:13:55.540Z","0.19.0-canary.eafb7991.0":"2020-09-02T02:18:50.674Z","0.19.0-canary.606642ec.0":"2020-09-02T21:36:13.456Z","0.19.0-canary.ddf05c42.0":"2020-09-03T13:53:39.864Z","0.19.0-canary.b889e6dc.0":"2020-09-03T14:11:52.833Z","0.19.0-canary.aabeceb0.0":"2020-09-03T19:58:07.125Z","0.19.0-canary.d8cca3a6.0":"2020-09-03T21:32:05.383Z","0.19.0-canary.26d34b2e.0":"2020-09-03T21:57:25.512Z","0.19.0-canary.a1c44494.0":"2020-09-09T22:08:12.611Z","0.19.0-canary.be1cd1e9.0":"2020-09-10T16:41:37.808Z","0.19.0-canary.f094c0ce.0":"2020-09-10T17:36:46.328Z","0.19.0-canary.c1261e7d.0":"2020-09-11T02:26:59.217Z","0.19.0-canary.9b39ed1e.0":"2020-09-11T02:27:50.963Z","0.19.0-canary.e67214b3.0":"2020-09-11T02:32:08.455Z","0.19.0-canary.36f5da28.0":"2020-09-11T02:34:47.242Z","0.19.0-canary.3babab12.0":"2020-09-11T02:37:57.123Z","0.19.0-canary.a4481e6f.0":"2020-09-11T02:49:55.391Z","0.19.0-canary.a9177836.0":"2020-09-11T17:48:05.551Z","0.19.0-canary.b102a3c8.0":"2020-09-14T20:13:51.398Z","0.19.0-canary.a7fbc707.0":"2020-09-15T16:06:20.831Z","0.19.0-canary.ed6b8660.0":"2020-09-15T17:25:23.505Z","0.19.0-canary.9c2331f5.0":"2020-09-15T17:49:54.001Z","0.19.0-canary.63a5f088.0":"2020-09-16T21:38:32.327Z","0.19.0-canary.b7995e49.0":"2020-09-16T23:27:10.467Z","0.19.0-canary.0da3ec97.0":"2020-09-21T22:09:13.747Z","0.19.0-canary.a0793c96.0":"2020-09-22T17:05:05.954Z","0.19.0-canary.06998a3e.0":"2020-09-22T18:26:18.648Z","0.19.0-canary.3484a90d.0":"2020-09-22T22:04:40.234Z","0.19.0-canary.3f99af40.0":"2020-09-24T23:22:01.332Z","0.19.0-canary.72aa1129.0":"2020-09-25T21:07:58.203Z","0.19.0-canary.394fd3f6.0":"2020-09-28T14:13:07.227Z","0.19.0-canary.347110f1.0":"2020-09-28T16:50:54.910Z","0.19.0-canary.5e330bb9.0":"2020-09-30T22:01:48.762Z","0.19.0-canary.30b9e3a9.0":"2020-09-30T22:38:52.456Z","0.19.0-canary.7bb04b9a.0":"2020-10-01T23:23:40.137Z","0.19.0-canary.615d861d.0":"2020-10-02T01:33:58.570Z","0.19.0-canary.af110e86.0":"2020-10-02T23:50:30.043Z","0.19.0-canary.89d27ca5.0":"2020-10-06T01:27:37.020Z","0.19.0-canary.9ef2e7c2.0":"2020-10-07T00:14:59.689Z","0.19.0-canary.96c8bdc1.0":"2020-10-07T20:08:17.227Z","0.20.0-canary.6c21f034.0":"2020-10-07T22:31:04.341Z","0.19.0":"2020-10-07T22:33:37.390Z","0.20.0-canary.1f026aaa.0":"2020-10-08T22:54:15.049Z","0.19.1":"2020-10-08T23:06:15.488Z","0.20.0-canary.5f6894b1.0":"2020-10-08T23:07:48.243Z","0.20.0-canary.f6260d06.0":"2020-10-12T22:34:49.595Z","0.20.0-canary.2d1b08aa.0":"2020-10-13T19:22:48.557Z","0.20.0-canary.5bd58844.0":"2020-10-13T23:46:52.663Z","0.20.0-canary.bc846b29.0":"2020-10-14T18:16:24.467Z","0.20.0-canary.3280b686.0":"2020-10-16T00:05:03.849Z","0.20.0-canary.9e94cd38.0":"2020-10-16T21:15:03.241Z","0.20.0-canary.4773c773.0":"2020-10-16T22:34:47.172Z","0.20.0-canary.65787913.0":"2020-10-19T18:51:37.595Z","0.20.0-canary.5485fba3.0":"2020-10-19T21:24:50.937Z","0.20.0-canary.a39d0a92.0":"2020-10-23T21:24:29.065Z","0.20.0-canary.4eafcbc1.0":"2020-10-27T01:21:33.756Z","0.20.0-canary.32961593.0":"2020-10-28T00:39:47.219Z","0.20.0-canary.8e3a0601.0":"2020-10-29T21:37:40.562Z","0.20.0-canary.178c25b4.0":"2020-10-29T21:51:11.019Z","0.20.0-canary.124beb49.0":"2020-10-31T00:07:07.161Z","0.20.0-canary.5937f468.0":"2020-11-04T21:06:31.947Z","0.20.0-canary.a9bafaee.0":"2020-11-05T22:31:21.141Z","0.20.0-canary.184861ee.0":"2020-11-07T00:38:16.950Z","0.20.0-canary.6c6ae2d6.0":"2020-11-09T13:06:27.798Z","0.20.0-canary.ea2aa477.0":"2020-11-09T23:58:43.882Z","0.20.0-canary.a2c088dc.0":"2020-11-10T14:24:51.299Z","0.20.0-canary.b04d71d4.0":"2020-11-12T10:42:37.430Z","0.20.0-canary.2c553352.0":"2020-11-12T22:43:22.131Z","0.20.0-canary.6560d19a.0":"2020-11-13T20:49:01.641Z","0.20.0-canary.a28d5ec3.0":"2020-11-17T15:24:42.075Z","0.20.0-canary.03e7e778.0":"2020-11-17T19:26:52.869Z","0.20.0-canary.ac8ed597.0":"2020-11-17T22:12:34.626Z","0.20.0-canary.b6a60f60.0":"2020-11-17T22:52:54.645Z","0.20.0-canary.71cc24fb.0":"2020-11-17T23:17:20.373Z","0.20.0-canary.761027ff.0":"2020-11-18T22:14:50.853Z","0.20.0-canary.dc93d04c.0":"2020-11-18T22:20:29.716Z","0.20.0-canary.4a5d4eeb.0":"2020-11-19T11:31:10.841Z","0.20.0-canary.bd176a15.0":"2020-11-19T19:11:07.386Z","0.20.0-canary.e85aa60d.0":"2020-11-23T22:25:21.678Z","0.20.0-canary.72092360.0":"2020-11-24T04:18:43.389Z","0.20.0-canary.baf9d39f.0":"2020-11-25T21:48:54.124Z","0.20.0-canary.51aab0ad.0":"2020-12-01T01:05:53.179Z","0.20.0-canary.8fd4af5b.0":"2020-12-03T00:27:48.476Z","0.20.0-canary.26d14d2f.0":"2020-12-03T00:56:26.593Z","0.20.0-canary.1663d7e4.0":"2020-12-03T01:17:04.366Z","0.20.0-canary.cbe9fc12.0":"2020-12-03T19:07:52.334Z","0.20.0-canary.9755be10.0":"2020-12-03T19:25:55.974Z","0.20.0-canary.3f64270c.0":"2020-12-03T21:50:28.791Z","0.21.0-canary.d893b14a.0":"2020-12-03T22:26:38.411Z","0.20.0":"2020-12-03T22:29:06.963Z","0.21.0-canary.47c7d7e5.0":"2020-12-11T19:57:22.549Z","0.21.0-canary.b304a78b.0":"2020-12-15T20:04:42.023Z","0.21.0-canary.777c5fa4.0":"2020-12-16T21:54:33.279Z","0.21.0-canary.635c7996.0":"2020-12-17T23:32:39.965Z","0.21.0-canary.20b0045f.0":"2020-12-17T23:49:29.534Z","0.21.0-canary.41f77000.0":"2020-12-18T00:35:48.081Z","0.21.0-canary.afe4079a.0":"2020-12-22T17:40:20.951Z","0.21.0-canary.407ef8f9.0":"2020-12-30T23:03:10.237Z","0.21.0-canary.2e26e137.0":"2021-01-05T18:50:07.441Z","0.21.0-canary.9009f6c1.0":"2021-01-08T19:54:51.709Z","0.21.0-canary.ee99b646.0":"2021-01-11T23:08:44.948Z","0.21.0-canary.740ed33b.0":"2021-01-12T18:04:39.810Z","0.21.0-canary.c5c541b1.0":"2021-01-12T18:46:07.562Z","0.21.0-canary.06fe9d90.0":"2021-01-12T20:55:34.271Z","0.21.0-canary.269eed01.0":"2021-01-13T21:45:58.964Z","0.21.0-canary.8c075f35.0":"2021-01-13T23:07:52.549Z","0.21.0-canary.3cda381b.0":"2021-01-14T00:05:09.235Z","0.21.0-canary.bc113605.0":"2021-01-14T00:46:06.714Z","0.21.0-canary.0c1d6ff9.0":"2021-01-15T20:09:53.579Z","0.21.0-canary.b4332e00.0":"2021-01-15T22:07:58.519Z","0.21.0-canary.2899691d.0":"2021-01-16T01:45:08.954Z","0.21.0-canary.fe73953b.0":"2021-01-19T19:21:57.260Z","0.21.0-canary.d3a16455.0":"2021-01-19T19:52:53.502Z","0.21.0-canary.597ca1b6.0":"2021-01-20T01:00:38.044Z","0.21.0-canary.3c195efe.0":"2021-01-20T02:02:02.564Z","0.21.0-canary.f7b8755f.0":"2021-01-20T20:38:15.375Z","0.21.0-canary.f60de7df.0":"2021-01-20T23:37:08.749Z","0.21.0-canary.664a2927.0":"2021-01-21T19:19:09.915Z","0.21.0-canary.a6d312e5.0":"2021-01-21T21:48:08.695Z","0.21.0-canary.027365eb.0":"2021-01-22T21:08:09.625Z","0.21.0-canary.7e72b66d.0":"2021-01-22T23:27:03.368Z","0.21.0-canary.a6d6a1e7.0":"2021-01-22T23:33:18.845Z","0.21.0-canary.b95fe100.0":"2021-01-22T23:52:29.524Z","0.21.0-canary.c8797192.0":"2021-01-23T00:07:45.900Z","0.21.0-canary.946f5563.0":"2021-01-23T00:44:06.172Z","0.21.0-canary.43664f0e.0":"2021-01-25T22:40:44.934Z","0.21.0-canary.2e769e3c.0":"2021-01-26T00:06:50.296Z","0.21.0-canary.14e01610.0":"2021-01-27T19:52:03.187Z","0.21.0-canary.5de00c1b.0":"2021-01-27T20:17:43.356Z","0.21.0-canary.5a328336.0":"2021-01-28T19:55:16.588Z","0.21.0-canary.533b1251.0":"2021-01-29T15:12:18.007Z","0.21.0-canary.ab5c0a10.0":"2021-02-02T20:17:59.656Z","0.21.0-canary.b7a40b27.0":"2021-02-03T15:04:27.144Z","0.21.0-canary.0fdee204.0":"2021-02-03T18:34:40.912Z","0.21.0-canary.5160e548.0":"2021-02-05T23:51:49.417Z","0.21.0-canary.4fa2daec.0":"2021-02-09T00:19:22.627Z","0.21.0-canary.67f285fb.0":"2021-02-09T00:51:45.931Z","0.21.0-canary.58cd5a70.0":"2021-02-11T20:45:42.407Z","0.21.0-canary.8107ca43.0":"2021-02-11T23:29:33.247Z","0.21.0-canary.d35d64ef.0":"2021-02-11T23:43:41.443Z","0.21.0-canary.78bcf058.0":"2021-02-12T00:48:57.882Z","0.21.0-canary.0c6908fd.0":"2021-02-12T01:25:25.967Z","0.21.0-canary.f1f34ee0.0":"2021-02-12T20:18:38.753Z","0.21.0-canary.d84df029.0":"2021-02-16T19:09:01.700Z","0.21.0-canary.c525f471.0":"2021-02-17T20:54:10.446Z","0.21.0-canary.ba7a1b35.0":"2021-02-19T00:14:37.323Z","0.21.0-canary.9a566dda.0":"2021-02-19T18:38:44.509Z","0.21.0-canary.55addb8c.0":"2021-02-19T22:02:52.029Z","0.21.0-canary.85dd5e9b.0":"2021-02-23T02:20:01.902Z","0.21.0-canary.aa3e078e.0":"2021-02-23T17:15:55.792Z","0.21.0-canary.dccd254e.0":"2021-02-26T21:10:50.566Z","0.21.0-canary.7dd1a27d.0":"2021-03-01T22:01:42.731Z","0.21.0-canary.12574572.0":"2021-03-02T20:30:04.081Z","0.21.0-canary.1109a3d3.0":"2021-03-02T20:35:22.055Z","0.21.0-canary.b9cd8739.0":"2021-03-03T17:48:40.124Z","0.21.0-canary.71ee796a.0":"2021-03-03T20:11:48.459Z","0.21.0-canary.2be191ed.0":"2021-03-03T21:52:18.265Z","0.21.0-canary.6dc7b06f.0":"2021-03-05T00:23:03.552Z","0.21.0-canary.24fe7ba6.0":"2021-03-05T17:27:43.265Z","0.21.0-canary.12c477d1.0":"2021-03-08T22:24:07.528Z","0.21.0-canary.4c38f801.0":"2021-03-08T23:25:19.386Z","0.21.0-canary.8795b83f.0":"2021-03-09T18:28:06.873Z","0.21.0-canary.12b84cb7.0":"2021-03-10T00:41:49.984Z","0.21.0-canary.6ac6784b.0":"2021-03-10T00:52:15.075Z","0.21.0-canary.b6d92934.0":"2021-03-10T22:01:34.716Z","0.21.0-canary.99a55b9e.0":"2021-03-10T22:52:23.210Z","0.21.0-canary.bb14efb7.0":"2021-03-10T23:37:52.894Z","0.21.0-canary.9ecf3bdd.0":"2021-03-11T00:24:28.511Z","0.21.0-canary.7c0e02fd.0":"2021-03-11T01:47:16.970Z","0.21.0-canary.2d6d59cc.0":"2021-03-11T18:30:15.567Z","0.21.0-canary.0138863c.0":"2021-03-11T18:37:32.546Z","0.21.0-canary.926f5bad.0":"2021-03-11T20:19:20.519Z","0.21.0-canary.520290a9.0":"2021-03-11T22:28:36.205Z","0.21.0-canary.9ec431d1.0":"2021-03-11T22:33:06.161Z","0.21.0-canary.4246c082.0":"2021-03-11T22:40:02.546Z","0.21.0-canary.2d736253.0":"2021-03-15T22:36:32.032Z","0.21.0-canary.7033124d.0":"2021-03-16T18:38:20.085Z","0.21.0-canary.6c0ee901.0":"2021-03-16T22:39:43.132Z","0.21.0-canary.7f0d605e.0":"2021-03-17T18:05:23.722Z","0.21.0-canary.572107b5.0":"2021-03-18T23:54:53.260Z","0.21.0-canary.b7b220b1.0":"2021-03-19T00:20:44.102Z","0.21.0-canary.233b2de7.0":"2021-03-19T18:30:37.867Z","0.21.0-canary.0c1a2d97.0":"2021-03-19T21:22:02.471Z","0.21.0-canary.57ca2e73.0":"2021-03-19T22:41:31.880Z","0.21.0-canary.5c058f4b.0":"2021-03-23T23:09:12.346Z","0.21.0-canary.e27ef7cd.0":"2021-03-30T20:12:01.750Z","0.21.0-canary.15c09e74.0":"2021-03-31T16:48:23.487Z","0.21.0-canary.4dc32be3.0":"2021-03-31T23:48:52.369Z","0.21.0-canary.4b717f65.0":"2021-04-01T18:15:15.363Z","0.21.0-canary.c6870f20.0":"2021-04-01T23:42:44.432Z","0.21.0-canary.852f873c.0":"2021-04-02T05:22:46.557Z","0.21.0-canary.4a674a1d.0":"2021-04-02T14:44:57.091Z","0.21.0-canary.c5b29ff1.0":"2021-04-05T17:50:41.825Z","0.21.0-canary.583644a6.0":"2021-04-05T17:51:39.003Z","0.21.0-canary.02ac1e6b.0":"2021-04-06T18:37:03.129Z","0.21.0-canary.5ac5856e.0":"2021-04-06T18:43:27.574Z","0.21.0-canary.bb23dbc4.0":"2021-04-07T21:24:32.317Z","0.21.0-canary.e539904c.0":"2021-04-08T18:02:33.697Z","0.21.0-canary.a93ae333.0":"2021-04-09T20:12:14.381Z","0.21.0-canary.e142c144.0":"2021-04-12T14:51:16.396Z","0.21.0-canary.382d7eb0.0":"2021-04-12T22:06:04.389Z","0.21.0-canary.b16c7885.0":"2021-04-12T22:39:41.453Z","0.21.0-canary.0e92782b.0":"2021-04-13T14:42:31.312Z","0.21.0-canary.70b3a072.0":"2021-04-14T22:26:50.838Z","0.21.0-canary.ff79b092.0":"2021-04-15T19:00:35.114Z","0.21.0-canary.f35b2fd7.0":"2021-04-15T19:10:55.190Z","0.21.0-canary.11977cac.0":"2021-04-16T00:58:34.429Z","0.21.0-canary.018ff45e.0":"2021-04-22T22:51:38.094Z","0.21.0-canary.c99d1fa5.0":"2021-04-26T19:47:10.903Z","0.21.0-canary.eea9b304.0":"2021-04-27T22:53:45.674Z","0.21.0-canary.5dd85d0c.0":"2021-04-28T00:10:02.674Z","0.21.0-canary.cc813cff.0":"2021-04-30T21:19:52.097Z","0.21.0-canary.0875e898.0":"2021-04-30T21:28:02.767Z","0.21.0":"2021-04-30T23:58:17.866Z","0.22.0-canary.8f1e7e1b.0":"2021-05-01T00:05:51.901Z","0.22.0-canary.deb0e792.0":"2021-05-03T21:34:47.077Z","0.22.0-canary.a3ff615f.0":"2021-05-03T22:34:12.521Z","0.22.0-canary.948ccfb5.0":"2021-05-04T00:11:12.761Z","0.22.0-canary.9f8337d7.0":"2021-05-04T18:37:30.452Z","0.22.0-canary.5813480a.0":"2021-05-05T18:25:59.976Z","0.22.0-canary.ab7fc1bf.0":"2021-05-06T18:00:01.755Z","0.22.0-canary.25693d60.0":"2021-05-07T21:56:40.958Z","0.22.0-canary.c497962b.0":"2021-05-07T22:20:27.115Z","0.22.0-canary.e300688e.0":"2021-05-07T22:24:53.364Z","0.22.0-canary.d70287f2.0":"2021-05-10T19:29:49.497Z","0.22.0-canary.02e841b2.0":"2021-05-10T20:35:08.060Z","0.22.0-canary.badda2f0.0":"2021-05-11T00:35:12.143Z","0.22.0-canary.004aca62.0":"2021-05-11T18:06:52.151Z","0.22.0-canary.4af17446.0":"2021-05-11T18:46:40.308Z","0.22.0-canary.b94d7187.0":"2021-05-11T18:52:12.409Z","0.22.0-canary.4021b2f9.0":"2021-05-12T22:01:13.910Z","0.22.0-canary.6a5956a3.0":"2021-05-12T22:17:55.672Z","0.22.0-canary.b6e8a74b.0":"2021-05-12T23:03:54.740Z","0.22.0-canary.c94e1030.0":"2021-05-12T23:09:48.651Z","0.22.0-canary.40a34e35.0":"2021-05-12T23:58:58.339Z","0.22.0-canary.1be14d2c.0":"2021-05-13T17:50:25.473Z","0.22.0-canary.87dbd64f.0":"2021-05-14T20:58:58.779Z","0.22.0-canary.c452e4da.0":"2021-05-17T23:32:34.893Z","0.22.0-canary.2212691a.0":"2021-05-17T23:53:13.310Z","0.22.0-canary.f748ff2f.0":"2021-05-18T00:23:06.308Z","0.22.0-canary.cc04657a.0":"2021-05-18T01:21:29.993Z","0.22.0-canary.3a3114fa.0":"2021-05-19T23:40:47.810Z","0.22.0-canary.b46bdf83.0":"2021-05-20T01:51:38.081Z","0.22.0-canary.b401a081.0":"2021-05-21T23:23:35.608Z","0.22.0-canary.012c8dc0.0":"2021-05-22T00:16:57.967Z","0.22.0-canary.e01a1731.0":"2021-05-24T16:03:22.982Z","0.22.0-canary.59174b9f.0":"2021-05-25T18:02:55.452Z","0.22.0-canary.c96cb2e0.0":"2021-05-25T19:12:58.084Z","0.22.0-canary.b9b0e330.0":"2021-05-25T21:00:58.093Z","0.22.0-canary.ea2a8063.0":"2021-05-25T21:06:03.645Z","0.22.0-canary.60cd9178.0":"2021-05-25T23:14:37.470Z","0.22.0-canary.2e2c75f2.0":"2021-05-26T00:12:11.760Z","0.22.0-canary.b99c77d5.0":"2021-05-26T19:13:52.481Z","0.22.0-canary.0de82c12.0":"2021-05-26T21:31:41.088Z","0.22.0-canary.227a4614.0":"2021-05-27T16:03:51.675Z","0.22.0-canary.b3d21d31.0":"2021-05-27T18:45:52.803Z","0.22.0-canary.288c33ec.0":"2021-06-02T19:33:40.559Z","0.22.0-canary.7eb7ccb0.0":"2021-06-03T19:55:42.665Z","0.22.0-canary.7fcc0726.0":"2021-06-08T00:46:07.130Z","0.22.0-canary.220a4e5e.0":"2021-06-08T17:50:46.709Z","0.22.0-canary.6b2d6ab0.0":"2021-06-08T18:37:12.886Z","0.22.0-canary.2b20825e.0":"2021-06-11T23:49:33.207Z","0.22.0-canary.e1511867.0":"2021-06-12T00:57:50.566Z","0.22.0-canary.ef4a0c0d.0":"2021-06-15T19:52:27.410Z","0.22.0-canary.573d8913.0":"2021-06-18T23:27:17.906Z","0.22.0-canary.21dba001.0":"2021-06-21T21:41:11.962Z","0.22.0-canary.6f5bfd0f.0":"2021-06-24T22:56:37.441Z","0.22.0-canary.fd8360b4.0":"2021-06-25T19:09:45.952Z","0.22.0-canary.6f74432f.0":"2021-06-25T20:47:33.198Z","0.22.0-canary.b62f901d.0":"2021-06-25T22:17:51.135Z","0.22.0-canary.73122cba.0":"2021-06-30T19:37:24.081Z","0.22.0-canary.a6912af5.0":"2021-07-01T21:34:36.915Z","0.22.0-canary.134f24bf.0":"2021-07-01T22:32:57.517Z","0.22.0-canary.1debb78f.0":"2021-07-07T00:47:00.524Z","0.22.0-canary.d53edeb6.0":"2021-07-07T17:00:51.009Z","0.22.0-canary.2226489a.0":"2021-07-08T18:02:07.761Z","0.22.0-canary.d4801c11.0":"2021-07-08T20:03:19.183Z","0.22.0-canary.7ec5f2d6.0":"2021-07-12T17:17:26.400Z","0.22.0-canary.86cb4ca7.0":"2021-07-13T17:38:15.526Z","0.22.0-canary.bc9a724e.0":"2021-07-13T18:42:37.803Z","0.22.0-canary.7847b83a.0":"2021-07-14T17:19:14.323Z","0.22.0-canary.8cba18fa.0":"2021-07-14T20:27:17.523Z","0.22.1":"2021-07-14T22:52:58.366Z","0.23.0-canary.fbc09b4e.0":"2021-07-14T22:54:43.257Z","0.23.0-canary.73e9f83c.0":"2021-07-15T20:40:05.702Z","0.23.0-canary.cc0aa7a9.0":"2021-07-15T21:04:20.634Z","0.23.0-canary.a8fcac45.0":"2021-07-15T21:23:10.690Z","0.23.0-canary.3ca580d1.0":"2021-07-15T22:04:36.461Z","0.23.0-canary.9e41cb2e.0":"2021-07-15T23:09:27.658Z","0.23.0-canary.c180db74.0":"2021-07-16T17:25:35.581Z","0.23.0-canary.0d0a9267.0":"2021-07-16T17:57:47.039Z","0.23.0-canary.d234ec3f.0":"2021-07-16T18:08:18.066Z","0.23.0-canary.5cd4bcdb.0":"2021-07-16T21:12:42.686Z","0.23.0-canary.2b133cb2.0":"2021-07-16T22:07:09.321Z","0.23.0-canary.ae4f422b.0":"2021-07-16T23:54:37.322Z","0.23.0-canary.90ff8057.0":"2021-07-19T14:08:17.992Z","0.23.0-canary.dd7b75d1.0":"2021-07-19T17:51:17.197Z","0.23.0-canary.104debd5.0":"2021-07-19T22:54:08.335Z","0.23.0-canary.4612705d.0":"2021-07-20T16:05:16.311Z","0.23.0-canary.b36502a2.0":"2021-07-21T22:35:12.160Z","0.23.0-canary.2c392ab3.0":"2021-07-22T14:53:29.571Z","0.23.0-canary.e8bac95a.0":"2021-07-22T18:53:26.028Z","0.23.0-canary.38f29f8f.0":"2021-07-23T18:16:36.272Z","0.23.0-canary.e0693475.0":"2021-07-23T18:56:44.999Z","0.23.0-canary.d595e030.0":"2021-07-23T20:53:46.746Z","0.23.0-canary.fe7cca31.0":"2021-07-23T21:57:20.363Z","0.23.0-canary.fd9da483.0":"2021-07-26T21:25:34.878Z","0.23.0-canary.8a4c7e06.0":"2021-07-26T22:44:40.355Z","0.23.0-canary.5b395fd1.0":"2021-07-27T22:53:44.641Z","0.23.0-canary.e5efdcc0.0":"2021-07-28T17:23:14.985Z","0.23.0-canary.ab310900.0":"2021-07-28T20:21:59.179Z","0.23.0-canary.21dc9bc5.0":"2021-07-28T20:26:49.617Z","0.23.0-canary.68c7fe5c.0":"2021-07-29T18:32:28.972Z","0.23.0-canary.aebe39e8.0":"2021-07-30T19:14:28.582Z","0.23.0-canary.ea889c69.0":"2021-08-03T18:48:22.482Z","0.23.0-canary.21918905.0":"2021-08-03T21:15:09.468Z","0.23.0-canary.193c87be.0":"2021-08-04T18:08:19.724Z","0.23.0-canary.6fc52d8b.0":"2021-08-05T18:11:33.010Z","0.23.0-canary.e2e9777d.0":"2021-08-05T22:48:08.876Z","0.23.0-canary.72ff1e68.0":"2021-08-06T20:49:30.340Z","0.23.0-canary.c527e93b.0":"2021-08-06T21:11:10.219Z","0.23.0-canary.78b1eaac.0":"2021-08-09T18:04:31.660Z","0.23.0-canary.a8a4ddc9.0":"2021-08-10T18:47:38.057Z","0.23.0-canary.99fc0632.0":"2021-08-11T22:22:16.596Z","0.23.0-canary.3f47ae57.0":"2021-08-12T18:00:40.711Z","0.23.0-canary.6b9bfc32.0":"2021-08-12T18:24:53.057Z","0.23.0-canary.c89ecc63.0":"2021-08-16T17:17:39.050Z","0.23.0-canary.59de86bd.0":"2021-08-18T01:39:06.688Z","0.23.0-canary.dcda879b.0":"2021-08-18T22:23:56.568Z","0.23.0-canary.dbb8b366.0":"2021-08-19T23:01:01.065Z","0.23.0-canary.c6e3060c.0":"2021-08-19T23:02:51.111Z","0.23.0-canary.03120b7d.0":"2021-08-20T00:28:01.528Z","0.23.0-canary.d75a5f74.0":"2021-08-20T07:57:18.274Z","0.23.0-canary.3d79ffe7.0":"2021-08-20T17:22:08.578Z","0.23.0-canary.02213ebe.0":"2021-08-20T17:26:54.967Z","0.23.0-canary.90a999b9.0":"2021-08-20T18:43:17.770Z","0.23.0-canary.6db58716.0":"2021-08-23T09:08:47.008Z","0.23.0-canary.9fb5bc35.0":"2021-08-23T22:51:05.109Z","0.23.0-canary.ddaa5d8e.0":"2021-08-24T18:50:30.334Z","0.23.0-canary.756208fb.0":"2021-08-25T19:51:24.110Z","0.23.0-canary.9576dcd9.0":"2021-08-25T21:44:37.805Z","0.23.0-canary.7531cf97.0":"2021-08-26T17:26:53.960Z","0.23.0-canary.3bab26b4.0":"2021-08-26T21:45:33.719Z","0.23.0-canary.fab48bee.0":"2021-08-26T22:08:27.964Z","0.23.0-canary.dec18df7.0":"2021-08-30T08:29:43.522Z","0.23.0-canary.61fe5b17.0":"2021-08-30T19:29:26.819Z","0.23.0-canary.a8c31f54.0":"2021-08-30T20:32:14.495Z","0.23.0-canary.a096dba8.0":"2021-08-31T22:19:41.357Z","0.23.0-canary.7ec04d47.0":"2021-09-02T23:26:08.131Z","0.23.0-canary.d00b098d.0":"2021-09-03T21:27:21.474Z","0.23.0-canary.f29b3352.0":"2021-09-07T18:16:51.784Z","0.23.0-canary.4962a163.0":"2021-09-07T23:54:05.344Z","0.23.0-canary.33102bf4.0":"2021-09-08T00:14:16.617Z","0.23.0-canary.76c68381.0":"2021-09-08T20:14:25.157Z","0.23.0-canary.17d51f76.0":"2021-09-08T23:27:00.659Z","0.23.0-canary.3fae6c2d.0":"2021-09-10T18:33:38.996Z","0.23.0-canary.f1958c4b.0":"2021-09-13T19:21:20.846Z","0.23.0-canary.78abbd59.0":"2021-09-13T21:27:02.074Z","0.23.0":"2021-09-13T21:35:58.400Z","0.24.0-canary.9830d665.0":"2021-09-13T21:37:44.765Z","0.24.0-canary.20e2081c.0":"2021-09-13T23:32:51.080Z","0.24.0-canary.583613a9.0":"2021-09-14T16:55:57.599Z","0.24.0-canary.0e1bd56f.0":"2021-09-14T17:32:59.676Z","0.24.0-canary.7bb1818e.0":"2021-09-15T00:36:34.681Z","0.24.0-canary.b5e665a9.0":"2021-09-15T18:13:51.293Z","0.24.0-canary.ab1e177c.0":"2021-09-15T18:45:34.269Z","0.24.0-canary.8dff8894.0":"2021-09-15T19:09:16.177Z","0.24.0-canary.9cd7e927.0":"2021-09-15T20:32:52.922Z","0.24.0-canary.a7132082.0":"2021-09-15T21:46:25.625Z","0.24.0-canary.cd9110cd.0":"2021-09-16T17:46:15.808Z","0.24.0-canary.1e5a9883.0":"2021-09-17T20:39:31.934Z","0.24.0-canary.32c830ee.0":"2021-09-17T23:09:11.799Z","0.24.0-canary.1de87bb7.0":"2021-09-18T18:52:34.272Z","0.24.0-canary.f2ea80c4.0":"2021-09-20T17:55:19.934Z","0.24.0-canary.569d739f.0":"2021-09-20T21:24:19.976Z","0.24.0-canary.5a434a50.0":"2021-09-21T02:01:17.351Z","0.26.0-canary.b1c1ab52.0":"2021-09-21T03:12:36.124Z","0.25.1":"2021-09-21T03:12:49.021Z","0.26.0-canary.ae060177.0":"2021-09-21T14:38:33.914Z","0.26.0-canary.b6fe2a12.0":"2021-09-22T20:16:43.384Z","0.26.0-canary.07e91417.0":"2021-09-22T21:06:14.621Z","0.26.0-canary.e2203ffa.0":"2021-09-23T18:28:04.115Z","0.26.0-canary.4abe237e.0":"2021-09-24T17:31:34.454Z","0.26.0-canary.6278ee5d.0":"2021-09-27T18:31:47.591Z","0.26.0-canary.3a5d5f34.0":"2021-09-27T22:41:56.649Z","0.26.0-canary.143ed3c8.0":"2021-09-29T01:51:16.230Z","0.26.0-canary.e5923d68.0":"2021-09-30T00:06:17.509Z","0.26.0-canary.d8ed5109.0":"2021-09-30T23:34:18.886Z","0.26.0-canary.0efb9c2c.0":"2021-10-02T02:08:41.284Z","0.26.0-canary.1c9adcb3.0":"2021-10-04T17:34:01.567Z","0.26.0-canary.dfc00d60.0":"2021-10-09T00:57:45.040Z","0.26.0-canary.c3aa844c.0":"2021-10-11T23:14:46.371Z","0.25.2":"2021-10-11T23:18:37.733Z","0.26.0-canary.406d6fe1.0":"2021-10-13T20:59:55.897Z","0.26.0-canary.ca0a674f.0":"2021-10-18T21:37:22.710Z","0.26.0-canary.eefcf660.0":"2021-10-20T21:24:01.631Z","0.26.0-canary.d21acc8f.0":"2021-10-20T22:32:55.472Z","0.25.3":"2021-10-21T17:55:49.061Z","0.26.0-canary.60449b7b.0":"2021-10-21T18:17:56.564Z","0.26.0-canary.0d8084ed.0":"2021-10-28T17:45:21.245Z","0.26.0-canary.232327ee.0":"2021-11-01T20:16:13.946Z","0.26.0-canary.0a492ae8.0":"2021-11-02T10:00:58.151Z","0.26.0-canary.0aa18745.0":"2021-11-02T18:08:19.146Z","0.26.0-canary.f3e28323.0":"2021-11-02T19:00:00.665Z","0.26.0-canary.27e05c5d.0":"2021-11-03T18:45:27.617Z","0.26.0-canary.b9e44af7.0":"2021-11-03T19:04:27.770Z","0.26.0-canary.448f6cb9.0":"2021-11-04T18:08:20.345Z","0.26.0-canary.8067ce28.0":"2021-11-04T22:22:52.830Z","0.26.0-canary.345c2bb9.0":"2021-12-02T17:10:50.370Z","0.26.0-canary.0547aeeb.0":"2021-12-06T16:36:51.791Z","0.26.0-canary.3b2452cc.0":"2021-12-09T00:06:21.428Z","0.26.0-canary.cf7ba5a9.0":"2021-12-10T19:07:37.833Z","0.26.0-canary.e1bcf14e.0":"2021-12-28T20:46:14.638Z","0.26.0-canary.b9d35b69.0":"2022-01-05T18:27:52.998Z","0.26.0-canary.2afff08e.0":"2022-01-06T22:23:30.912Z","0.26.0-canary.893fc857.0":"2022-01-07T18:54:35.404Z","0.26.0-canary.69ba13b7.0":"2022-01-19T22:24:31.572Z","0.26.0-canary.0af8ade5.0":"2022-02-07T22:05:48.495Z","0.26.0":"2022-05-03T17:30:38.328Z","0.26.1":"2022-05-09T20:31:57.207Z","0.27.0":"2022-08-12T19:12:14.480Z"},"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 bar web component","homepage":"https://github.com/material-components/material-components-web-components#readme","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web-components.git","directory":"packages/tab-bar"},"bugs":{"url":"https://github.com/material-components/material-components-web-components/issues"},"license":"Apache-2.0","readme":"# `<mwc-tab-bar>` [![Published on npm](https://img.shields.io/npm/v/@material/mwc-tab-bar.svg)](https://www.npmjs.com/package/@material/mwc-tab-bar)\n> IMPORTANT: The Material Web Components are a work in progress and subject to\n> major changes until 1.0 release.\n\nTabs organize content across different screens, data 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-bar\n```\n\n> NOTE: The Material Web Components are distributed as ES2017 JavaScript\n> Modules, and use the Custom Elements API. They are compatible with all modern\n> browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional\n> tooling step is required to resolve *bare module specifiers*, as well as\n> transpilation and polyfills for IE11. See\n> [here](https://github.com/material-components/material-components-web-components#quick-start)\n> for detailed instructions.\n\n## Example usage\n\n### Basic\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/basic.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n\n<script type=\"module\">\n  import '@material/mwc-tab-bar/mwc-tab-bar.js';\n  import '@material/mwc-tab/mwc-tab.js';\n</script>\n```\n\n### Preselected\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/active-index.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar activeIndex=\"1\">\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" icon=\"accessibility\"></mwc-tab>\n  <mwc-tab label=\"Tab two\" icon=\"exit_to_app\"></mwc-tab>\n  <mwc-tab label=\"Tab three\" icon=\"camera\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Image / Slotted Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/image-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\" hasImageIcon>\n    <!-- margin bottom is (24px - height) / 2 -->\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <circle\n          r=\"5px\"\n          cx=\"5px\"\n          cy=\"5px\"\n          color=\"red\">\n      </circle>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab two\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"10px\"\n        height=\"10px\"\n        style=\"margin-bottom:7px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"green\">\n      </rect>\n    </svg>\n  </mwc-tab>\n  <mwc-tab label=\"Tab three\" hasImageIcon>\n    <svg\n        slot=\"icon\"\n        width=\"14.143px\"\n        height=\"14.143px\"\n        style=\"margin-bottom:4.928px;\">\n      <rect\n          width=\"10px\"\n          height=\"10px\"\n          color=\"blue\"\n          y=\"2.071px\"\n          x=\"2.071px\"\n          style=\"transform:rotate(45deg);transform-origin:center;\">\n      </rect>\n    </svg>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Stacked Icons\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/stacked-icons.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab label=\"tab one\" icon=\"accessibility\" stacked></mwc-tab>\n  <mwc-tab label=\"tab two\" icon=\"exit_to_app\" stacked></mwc-tab>\n  <mwc-tab label=\"tab three\" icon=\"camera\" stacked></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Min-width Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/min-width.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Icon Indicator (w/ stacked icon)\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/icon-indicator.png\" width=\"600px\">\n\n```html\n<mwc-tab-bar>\n  <mwc-tab\n      icon=\"camera\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"accessibility\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n  <mwc-tab\n      icon=\"exit_to_app\"\n      indicatorIcon=\"donut_large\">\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n### Scrollable\n\nWhen the contents of `mwc-tab-bar` exceed its width, the overflow tabs are made\nscrollable along the x axis.\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/scrollable.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    border: solid black 1px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab label=\"Tab one\"></mwc-tab>\n  <mwc-tab label=\"Tab two\"></mwc-tab>\n  <mwc-tab label=\"Tab three\"></mwc-tab>\n  <mwc-tab label=\"Tab four\"></mwc-tab>\n  <mwc-tab label=\"Tab five\"></mwc-tab>\n  <mwc-tab label=\"Tab six\"></mwc-tab>\n  <mwc-tab label=\"Tab seven\"></mwc-tab>\n  <mwc-tab label=\"Tab eight\"></mwc-tab>\n  <mwc-tab label=\"Tab nine\"></mwc-tab>\n  <mwc-tab label=\"Tab ten\"></mwc-tab>\n  <mwc-tab label=\"Tab eleven\"></mwc-tab>\n  <mwc-tab label=\"Tab twelve\"></mwc-tab>\n</mwc-tab-bar>\n```\n\n### Styled\n\n_Note: example is in the state of hovering over the first tab._\n\n<img src=\"https://raw.githubusercontent.com/material-components/material-components-web-components/6347c3e1b0264cc34cad24e4e52a23e2100a4926/packages/tab-bar/images/styled.png\" width=\"600px\">\n\n```html\n<style>\n  mwc-tab-bar {\n    --mdc-theme-primary: red;\n    --mdc-text-transform: none;\n    --mdc-tab-color-default: green;\n    --mdc-tab-text-label-color-default: green;\n    --mdc-tab-stacked-height: 100px;\n  }\n</style>\n<mwc-tab-bar>\n  <mwc-tab\n      label=\"tab one\"\n      icon=\"accessibility\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab two\"\n      icon=\"exit_to_app\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n  <mwc-tab\n      label=\"tab three\"\n      icon=\"camera\"\n      stacked\n      isMinWidthIndicator>\n  </mwc-tab>\n</mwc-tab-bar>\n```\n\n## API\n\n### Slots\n\n| Name              |\tDescription\n| ----------------- | -------------\n| _default_         |\t[`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab) elements to display.\n\n### Properties/Attributes\n\n| Name          | Type     | Default | Description\n| ------------- | -------- | ------- | -----------\n| `activeIndex` | `number` | `0`     | Index of tab that is active.\n\n### Methods\n\n| Name     | Description\n| -------- | -------------\n| `scrollIndexIntoView(index:number) => void` | For long, scrollable `tab-bar`s, scrolls the tab at the given index into view.\n\n### Events\n\n| Event Name            | Target             | Detail            | Description\n| --------------------- | ------------------ | ----------------- | -----------\n| `MDCTabBar:activated` | `mwc-tab-bar`      | `{index: number}` | Emitted when a tab selection has been made.\n\n### CSS Custom Properties\n\nInherits CSS Custom properties from:\n\n* [`mwc-tab`](https://github.com/material-components/material-web/tree/master/packages/tab)\n\n## Additional references\n\n- [MDC Web tabs](https://material.io/components/tabs/)\n","readmeFilename":"README.md","keywords":["material design","web components","tab bar"]}